1

960cssフレームワークを使用しています。問題は、3列のレイアウトで960幅全体を使用しようとしていることです。したがって、コンテナ16を使用し、グリッドで3つのdivを使用しています。左右の側溝を取り除くためにアルファとオメガを使用する最初と最後のグリッドIm。アルファガターを削除していますが、オメガガターは削除していません。これがhtmlです：

<div class="container_16" id="section_body">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>

セクション本体のCSSは次のとおりです。

#section_body {
    min-height:500px;
    overflow:hidden;
    background:#fff;
}

これが問題のスクリーンショットです。青色の最後のdivが右端まで進んでいないことがわかります。私は何が間違っているのですか？

ここに画像の説明を入力してください

アップデート

960cssと3divを除くすべてのスタイリングを削除しようとしましたが、それでも同じ問題が発生します。何があっても、960pxの幅全体に収まるようにすることはできません。幅は940pxになります。

4

2 に答える 2

5

警告：Jauzsikaのコードにはタイプミス（「grid_16」ではなく「grid16」）があり、動作しない場合でも機能します（「container_16」と「alpha」がないため）。

正解：

覚えておくべき2つの重要なことがあります：

1）設計上、960gsの左右の余白は10ピクセルです。つまり、実際のコンテンツ領域の幅は940ピクセルです。

2）ネストされたグリッドを使用する場合、この場合のみ、子要素には特別なクラスが必要です。最初の子にはクラス「alpha」が必要で、最後の子にはクラス「omega」が必要です。

コードに子divがないため、「alpha」や「omega」は必要ありません。

したがって、両方のソリューションは同等です（修正されたコード）：

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3" style="background:blue;">body right</div>
</div>

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid_16">
    <div class="grid_3 alpha" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>
于 2011-12-12T14:05:21.530 に答える
0

左右の列の幅は160ピクセルであるため、左右の余白は10〜10ピクセルで、さらに20ピクセルになります。中央の列の幅は580ピクセルで、余白も10〜10ピクセルです。

つまり、160 + 10 + 160 + 10 + 580 + 20 = 940px

選択した3列のレイアウトは20px薄くなっています。

次の例では、両側に10〜10ピクセルのガターがあるため、デッドセンターになります。

<div class="container_16" id="section_body" style="background-color:#CCCCCC">
<div class="grid16">
    <div class="grid_3" style="background:red;">body left</div>
    <div class="grid_10" style="background:green;">body</div>
    <div class="grid_3 omega" style="background:blue;">body right</div>
</div>
</div>
于 2011-08-06T00:50:40.733 に答える