0

レイアウトの設計に12列960グリッドシステムを使用しています。これが私のHTMLコードです

<div class="topStrip"></div>
    <div class='container_12 content'>
        <div class="topStrip"></div>
        <div class="menuStrip">
            <div class="grid_3 menu"></div>
        </div><!-- end menuStrip -->
        <div class="mainContent">
            <div class="grid_4  dash_1"></div>
        </div><!-- end mainContent -->
        <div class="footer"></div>
    </div><!-- end content -->

CSSは、以下のjsFiddleリンクで確認できます。

問題は、.mainContentDiv内のフィールド、つまりdiv.dash_1の外に出ていることです--jsFiddle。.content

ただし、を削除して内部のdivから.grid_4増やすと、それに応じて拡張されます-jsFiddle。.dash_1.mainContent

これはCSSの単純な問題かもしれませんが、私は頭を悩ませています。前もって感謝します。

4

2 に答える 2

1

grid_4にはfloatがあります。彼の親（mainContent）をクリアする必要があります。このように書いてください：

.mainContent {
    overflow: hidden;
    position: relative;
    margin-top: 50px;
}

詳細については、こちらをお読みくださいhttp://www.quirksmode.org/css/clearing.html

これをチェックしてくださいhttp://jsfiddle.net/PmKPb/8/

于 2012-09-12T08:53:50.243 に答える
0

これは、grid_4の幅が300pxであるためです。

これを見る

.container_12 .grid_4 {
    width:300px;
}
于 2012-09-12T08:53:52.613 に答える