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

发布于 2024-10-19 09:20:21 字数 1873 浏览 1 评论 0原文

我使用 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;
}

原文

I'm using 960.gs (http://960.gs) as a CSS framework for my site and I'm trying to colour in the background of the .container_12 classes rather than my .grid_12 classes for the extra 10px I get on each side, giving the grid a bit of whitespace to breathe.

I looked at the 960.gs example site and he has a background repeating on the y-axis and it seems to expand no matter how large or what is inside the .grid_12 or .grid_16 classes.

When I want to paint the background white (instead of have an image repeat on the y-axis), it appears as though my .grid_12 is floating and therefore .container_12 has no height and thus, no white background.

Here is my relevant 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>

and 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;
}

分享到QQ

分享到微博