html - コンテナDIVの拡張に問題があります

Question

ここにデモがあります> http://jsfiddle.net/AndyMP/4hzXe/

コンテナDIVが拡張されない理由がわかりません。

CSS

#container { 
position: relative;
width: 400px;
border: solid 1px #333;
padding: 20px;
}
#left { 
position: relative;
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 10px;
overflow: hidden;
}

HTML

<div id="container">

<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>

</div>

score 1 · Accepted Answer

これを試して

.left { 
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    margin: 10px;
    overflow: hidden;
}

<div id="left"></div>に変更されました<div class="left"></div>

デモ： http： //jsfiddle.net/4hzXe/6/

score 1 · Accepted Answer

フロートをクリアする必要があります。http://jsfiddle.net/4hzXe/2/

行を追加しました。clearfixoverflow: hidden;を使用できます。私はほとんどの場合clearfixソリューションを使用しています

#container { /* Preview content box */
    position: relative;
    width: 400px;
    border: solid 1px #333;
    padding: 20px;
    overflow: hidden;
}

また、をに変更しid="left"ましたclass="left"。idはページに1回だけ表示されます。

score 1 · Accepted Answer

フロートを封じ込めるテクニックが必要です。少なくとも2つの可能性：

あなたに最適な方法はどれですか？（私の推薦）

クリアの仕事を引き受けることができる要素（たとえばhr）がある場合は、それを使用します。
親の幅を設定できる場合は、floatプロパティをwidthと組み合わせて使用します（これがあなたの場合です）。
それ以外の場合はEasyclearingを使用してください
単純な状況ではオーバーフロープロパティを使用します

html - コンテナDIVの拡張に問題があります

3 に答える 3

Related

Reference