css – 无法在960.gs容器的背景中着色

2019年8月3日 184次阅读

我正在使用960.gs(http://960.gs)作为我的网站的CSS框架,我正在尝试在.container_12类的背景中着色,而不是我的.grid_12类,以获得额外的10px在每一边,让网格有一点空间来呼吸.

我查看了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;
}

最佳答案 要回答我自己的问题,< div class =“clear”>< / div>需要在每个.grid_之后,而不是每个.container_

点赞