2010-04-04 31 views
1

如何使用960.gs制作左右水槽的不同颜色?当我尝试一些简单的东西时:如何用960.gs制作左右水槽的不同颜色?

<div style="background-color: green"> 
    <div class="container_16"> 
    <div class="grid_16"> 
     test 
    </div> 
    </div> 
</div> 
<div style="background-color: cyan"> 
    <div class="container_16"> 
    <div class="grid_16"> 
     test 
    </div> 
    </div> 
</div> 

绿色和青色的颜色被忽略。看起来像“grid_16”类由于某种原因删除颜色?我的目标是能够在整个页面上以不同的颜色显示不同的页面部分,甚至超过960像素。因此,如果有人使浏览器的浏览器为1200像素,则左侧和右侧具有正确的颜色,而网格系统的其余部分都包含在中间的960像素内。

我可以添加一个背景颜色到'身体'来做到这一点只有一种颜色,但我想在页面中有多种颜色。像不同颜色的横条纹。谢谢。

回答

1

那么,了解你需要了解网格布局如何工作的原因。

事情是,当你告诉网格是一定的宽度,它也使它漂浮。 这意味着你的外部div的高度为0px。因此,总之。它不会删除背景颜色,它只是不显示它,因为没有任何东西可以显示(您的网格浮在其上,所以实际尺寸无关紧要。

要解决这个问题,只是在容器添加clearfix,它应该可以解决。但是,你还需要想一想的div继承每默认的背景颜色。

<div style="background-color: green"> 
    <div class="container_16 clearfix" style="background:white"> 
     <div class="grid_16"> 
     test 
     </div> 
    </div> 
    </div> 
    <div style="background-color: cyan"> 
    <div class="container_16 clearfix" style="background:white"> 
     <div class="grid_16"> 
     test 
     </div> 
    </div> 
    </div> 
0

坚持两个格容器并排侧是不是非常聪明的方式来产生水平条纹如果你想要一些容器突破网格的边界,那么适当调整它们的边距,或者把它们完全放在网格的后面(和外面)