css - 子が成長したときにhtml divを展開する方法は?

Question

テーブルを含むメイン div があります。

<div id="main_container"><table>

完全なコードはhttp://jsfiddle.net/tF62u/で確認できます。

ご覧のとおり、子テーブルは div よりも幅が広いですが、それ (div) はそれに応じて調整されません。

ここで欠落している定義はどれですか?

Answer 1

div の CSS ルールに追加display:inline-blockします。

#main_container {
    font-size: 9px;
    border: solid 3px #faa;
    background-color: rgba(245, 255, 10, 0.12);
    display: inline-block;
}

jsFiddle の例

Answer 2

可能性の 1 つは、div を左にフロートさせることです。フローティング要素は、ウィンドウと同じ幅ではなく、コンテンツと同じ幅です。

#main_container {
    font-size: 9px;
    border: solid 3px gray;
    background-color: rgba(245, 255, 10, 0.12);
    float:left;
}

フィドルを更新しました。

また、clear後でこのフロートを確認してください。そうしないと、ウィンドウがテーブルよりも広い場合、後続の他のコンテンツが div の右側に表示されます。
ちなみに、これはdisplay:inline-block;にも当てはまります。その場合、div の後にブロック要素が続くことを確認する必要があります。

この特定のフィドルの別の解決策は、div を完全に削除し、すべてのスタイルをテーブルに適用することです。もちろん、テーブルがdivのすべてのコンテンツである場合にのみ機能します...

Answer 3

display:table;あなたに追加#main_container

http://jsfiddle.net/tF62u/4/