divを内容より大きくしないためには？

と同じようなレイアウトになっています。

<div>
    <table>
    </table>
</div>

私はdivがtableの幅までしか拡大しないようにしたいと考えています。

nbro
編集された質問 20日 9月 2015 в 12:27
プログラミング
html css width
16日 1月 2009 в 4:03
12 ビュー

CSSがshrink-to-fitと呼ぶ幅を持つブロック要素が欲しいのですが、仕様ではそのようなものを得るための祝福された方法は提供されていません。CSS2では、shrink-to-fitは目標ではなく、ブラウザが何もないところから幅を「得なければならない」状況に対処するための手段です。そのような状況とは

  • フロート
  • 絶対配置要素
  • インラインブロック要素
  • テーブル要素

幅が指定されていない場合欲しいものはCSS3で追加することを考えているらしい。とりあえず、上記のいずれかで対応してください。

この機能を直接公開しないという判断は不思議に思えるかもしれませんが、ちゃんとした理由があります。お金がかかるからです。Shrink-to-fitは、少なくとも2回のフォーマットを意味します。要素の幅を知るまでは、フォーマットを始めることはできませんし、コンテンツ全体を見ないと幅を計算することはできません。さらに、縮小要素は思ったよりも頻繁には必要ありません。なぜテーブルの周りに余分なdivが必要なのでしょうか？もしかしたら、テーブルのキャプションだけが必要なのかもしれません。

robocat
編集した答え 8日 8月 2012 в 5:46
解説 (4)

これがどのような状況で現れるかはわかりませんが、CSSスタイルのプロパティ float を left または right に設定すると、このような効果が得られると思います。その一方で、テキストを浮かせて表示することができるなど、他の副作用もあります。

100%の自信はありませんし、現在のところ自分ではテストできませんので、間違っていたらご指摘ください。

Rob
編集した答え 19日 3月 2013 в 7:47
解説 (1)

CSS2互換のソリューションを使用することです。

.my-div
{
    min-width: 100px;
}

また、divをフロートさせることで可能な限り小さくすることができますが、div内のものがフロートしている場合は、clearfixを使用する必要があります。

.my-div
{
    float: left;
}
解説 (2)