1

これは CSS に関する基本的な質問ですが、ご存知のように、難しい言語になることがあります。

<div id="main">    
    <div id="container">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
        <div class="item">
    </div>
</div>

#main {clear: both; margin: 20px auto; max-width: 100%; width: 1000px;}
#container {clear: both; margin: 0 auto; max-width: 832px;}
.item {width: 208px; float: left;}

デフォルトでは、4 つ.items並んでいます。ブラウザ ウィンドウのサイズを幅 832 ピクセル未満に変更すると、.items3 行に収まるようにジャンプします。

3 つのアイテムを の中央に配置する方法、#containerまたは#container幅をフローティング コンテンツの幅と等しくして の中央#containerに配置するにはどうすればよい#mainですか?

モックアップ

4

1 に答える 1

2

私はこれが多かれ少なかれあなたが望むものだと信じています：

http://jsfiddle.net/L3JVe/17/

簡単な修正でした。私はあなた.itemのsをに設定し、display:inline-block;あなたのをに設定#containerしますtext-align:center;。

新しいCSSは次のようになります。

#main {
    clear: both;
    margin: 20px auto;
    max-width: 100%;
    width: 1000px;
}

#container {
    clear: both;
    margin: 0 auto;
    max-width: 832px;
    text-align:center; /*New*/
}

.item {
    width: 208px; /*May need to adjust*/
    display:inline-block; /*New*/
}​​​​​​​

また、レンダリングされたアイテムの間にスペースが表示されないように、HTMLのアイテム間のすべてのスペースを削除する必要があります。（ありがとう、@ thirtydot！）

于 2012-07-10T21:34:07.500 に答える