多くの質問は同様の問題に関するものですが、常にすべてのアイテムを中央に配置display:inline-block
する必要があります (もちろん、これは を使用して実行できます)。変数コンテナー (本体) 自体)。
問題は、コンテナーに何display
をclear
設定しても、含まれている浮動要素の幅を取得しないことです。これは信じられないほど単純であるべきだと真剣に考えたくなるのですが、それを機能させる方法がわかりません。
多くの質問は同様の問題に関するものですが、常にすべてのアイテムを中央に配置display:inline-block
する必要があります (もちろん、これは を使用して実行できます)。変数コンテナー (本体) 自体)。
問題は、コンテナーに何display
をclear
設定しても、含まれている浮動要素の幅を取得しないことです。これは信じられないほど単純であるべきだと真剣に考えたくなるのですが、それを機能させる方法がわかりません。
ソリューションには内部 div を使用する必要があります。
CSS:
#inner{
width:396px; /* (100+15*2+2) * 3 */
margin:auto;
}
HTML:
<div id="container">
<div id="inner">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="clear"></div>
</div>
</div>
UPD:体の幅を固定したくないことに気付きました。width:80%;
代わりに then を使用してください。デモ
問題は、これを正しく中央に配置するために 2 つの div が必要であり、次にすべてのブロックを含む幅の div を設定する必要があることです。次に、それをクリアして、内部の内部 div (ここのコードでは「コンテンツ」と呼ばれます) を使用して、内部フロートの開始を制御できます。
フィドルを更新しました: http://jsfiddle.net/h9H8w/8/
// HTML
<div id="container">
<div id="inner">
<div id="content">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
</div>
</div>
// CSS
body{
width: 100%;
}
#container{
float: left;
position: relative;
left: 50%;
}
#inner{
float: left;
position: relative;
left: -50%;
border:1px solid black;
}
#content{width: 500px;}
.clear{
clear:both;
}
.block{
float: left;
width:100px;
height:50px;
border:1px solid black;
margin: 15px;
}