0

多くの質問は同様の問題に関するものですが、常にすべてのアイテムを中央に配置display:inline-blockする必要があります (もちろん、これは を使用して実行できます)。変数コンテナー (本体) 自体)。

フローティング div

問題は、コンテナーに何displayclear設定しても、含まれている浮動要素の幅を取得しないことです。これは信じられないほど単純であるべきだと真剣に考えたくなるのですが、それを機能させる方法がわかりません。

これは、いじる基本的なフィドルです。

4

2 に答える 2

2

ソリューションには内部 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>​

ボディ幅が固定されていないDEMODEMO 。

UPD:体の幅を固定したくないことに気付きました。width:80%;代わりに then を使用してください。デモ

于 2012-08-30T19:54:36.853 に答える
0

問題は、これを正しく中央に配置するために 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;

}​
于 2012-08-30T20:09:08.477 に答える