4

サイトの CSS フレームワークとして 960.gs (http://960.gs) を使用しています。追加の 10 ピクセルの .grid_12 クラスではなく、.container_12 クラスの背景に色を付けようとしています。両側で、グリッドに呼吸するための少しの空白を与えます。

960.gs のサンプル サイトを見たところ、y 軸で背景が繰り返されており、.grid_12 または .grid_16 クラスのサイズや内容に関係なく拡大しているように見えます。

背景を白くペイントしたい場合 (y 軸で画像を繰り返すのではなく)、.grid_12 が浮いているように見えるため、.container_12 には高さがなく、白い背景がありません。

ここに私の関連するHTMLがあります

<body> 
    <div id="logoContainer" class="container_12"> 
        <div id="logo" class="grid_12"> 
            <h1>Logo</h1> 
        </div> <!-- end #logo --> 
    </div> <!-- end #logoContainer --> 
    <div class="clear"></div> 
    <div id="menuContainer" class="container_12"> 
        <div id="menu" class="grid_12"> 
            <ul> 
                <li><a href="#" class="selected">Link 1</a></li> 
                <li><a href="#">Link 2</a></li> 
                <li><a href="#">Link 3</a></li> 
                <li><a href="#">Link 4</a></li> 
            </ul> 
        </div> <!-- end #menu --> 
    </div> <!-- end #menuContainer --> 
    <div class="clear"></div>
    <div id="contentContainer" class="container_12">
        <div id="content" class="grid_12">
            <p>Content here</p>
        </div> <!-- end #content -->
    </div> <!-- end #contentContainer -->
    <div class="clear"></div>
</body>

とCSS

/* 960.gs */
@import url('reset.css');
@import url('960.css');
@import url('text.css');

#contentContainer
{
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 20px;
    -o-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
}
4

1 に答える 1

2

私自身の質問に答えるには、<div class="clear"></div>各 .container_ ではなく、各 .grid_ の後にある必要があります

于 2011-02-25T17:05:28.970 に答える