私は同じサイズの子divの可変数を持つ親divを左に浮かべています。私は、たとえそれが自分のコンテナをあふれさせることを意味していても、親divを子供の幅に拡大したい。浮動小数点数に合わせて親divを水平方向に拡張する
HTML/CSSでこれを自然に行う方法はありますか？
例（伸縮性のdivが広い180ピクセルという羽目になるでしょう）：
HTML：
<div id="stretchable-div">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
...
</div
CSS：
.child {
width: 60px;
height: 60px;
float:left;
}
この例では、伸縮性-div要素は、その親のうちのバストになり、そのに伸ばします子供。
CSS
#parent{
width:200px;
height:180px;
background:red;
}
#stretchable-div{
background:blue;
position: absolute;
}
.child {
width: 60px;
height: 60px;
float:left;
}
マークアップ
<div id="parent">Im a parent
<div id="stretchable-div">
<div class="child">a</div>
<div class="child">b</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
<div class="child">c</div>
</div>
</div>
@ Loktar-ありがとうございます、しかし、私は2つの質問があります - 私の変更されたバージョンの例を見てください：http://jsfiddle.net/seB5F/12/ 1）さらに要素を追加するか、絶対divを右に押すと、要素フレームの端に巻き始めます。 2）私はまた、オーバーフローを追加：親のdivに隠されたが、まだすべての伸縮可能なdivを参照してください。伸縮可能なdivを幅にストレッチさせ、オーバーフローを隠していないのはなぜですか？これを説明できますか？ – Yarin
最初の質問に答えるには、その絶対位置が文書の流れから取り除かれるので、オーバーフローが伸縮可能なdivに何の影響も及ぼさないので、相対的な値に変更してください。 – Loktar
@ Loktar-あなたは私の質問に答えました。しかし私はまだ問題がある - 私はオーバーフローが隠されることを望む。これを行うには、コンテナの位置を相対的にする必要がありますが、これによってコンテンツが折り返されます。何か案は？ – Yarin
あなたがのためにdisplay: inline-block;を追加することができます親要素。 ie7で作業するには、代わりにdisplay:inline;zoom:100%;を使用する必要があります。
だから、あなたが必要なもののための可能なCSSはこれです：
#stretchable-div {
background: none repeat scroll 0 0 red;
display: inline-block;
overflow: auto; /* clear the floats */
*display:inline; /* ie7 hack even better use conditional comment */
zoom:100%;
}
同じように@ピチカートの例が、使用して親をクリアするためoverflow:hiddendiv：http://jsfiddle.net/dSjv4/。
divの位置を指定してAリストの外にあるhere（記事の終わり近く）の素晴らしい記事があります。
@ Nathan-ありがとうございますが、あなたの例では、親divがコンテナをオーバーフローさせることはできません。 http://jsfiddle.net/dSjv4/14/を参照してください。 – Yarin
あなたはこれを行う方法を考え終えましたか？ –
これを行う最も簡単な方法は、JavaScriptを使用してオーバーフローのある親の中でコンテナ要素の幅を動的に増減することです。 –