css - div を「貪欲に」幅を取得する方法はありますか?

Question

2 つの div が並んでいます。どちらもjquery経由で閉じることができます。両方が表示されている場合、幅は固定されていますが、一方が閉じている場合は、残りの div を拡大して、閉じた div が占めていた幅を消費します。CSS（閉じるボタンを除く）だけを使用してこれを行う方法はありますか、それともjavascriptに頼る必要がありますか？

Answer 1

CSS でこれを解決する唯一の方法は、含まれている要素にクラスを追加することです。

<div id="container" class="left|right|both">
    <div class="left"></div>
    <div class="right"></div>
</div>

親クラスが何であるかに応じてコンテンツをスタイルします。leftがクラスの場合、最初divの幅に制限のない幅を指定し、2 番目の を非表示にしdivます。とright2 番目のdiv. 親がbothの場合、両方の div に 50% を与えます。

JavaScript が行う必要があるのは、現在コンテナーに適用されているクラスを処理することだけです。

Answer 2

これには、少なくとも 1 行の JavaScript を記述する必要があります。そうすれば、css を使用して効果を得ることができます。

jquery を使用して、閉じるをクリックするたびにクラスを div の親に切り替えます。閉じるボタンをクリックするためのjqueryコードを見つけて追加します

$("#parent").toggle("classname");

のような CSS を使用します。

#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }

Answer 3

このようなものは機能しますか？

HTML:

<div id="parent">
    <div class="right">div2</div>
    <div class="left">Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta  sem, at ultrices ante interdum at. Donec condimentum euismod consequat.  Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin  at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec  ullamcorper augue varius eget.</div>
</div>
<br />
<button id="remove">Remove Div 2</button>

CSS:

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background:green;
}
.left {
    overflow: hidden;
    height: 100px;
    background:red;
}​
​

JS:

$('#remove').on('click', function() {
    var div2 = $('.right')
    //div2.hide('slow');  // you could hide it as well  
    div2.remove();
});​

例：

• http://jsfiddle.net/9Q86Y/

Answer 4

編集

を使用してテーブルを模倣できます

display:table

と

display:table-cell

参照: http://jsfiddle.net/DUx3W/ (帽子のヒント: @Jimmy Breck-McKye)。

私の元のテーブル フィドル: http://jsfiddle.net/6KkRL/