1

如何用 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 像素内。

我可以为“body”添加一个背景颜色,只为一种颜色执行此操作,但我希望页面中有多种颜色。像不同颜色的横条纹。谢谢。

4

2 回答 2

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>
于 2010-04-04T22:57:53.527 回答
0

并排粘贴两个网格容器并不是产生水平条纹的一种非常聪明的方法。如果您希望某些容器突破网格的边界,则适当调整它们的边距,或者将它们完全放在网格的后面(和外面)。

于 2010-04-04T23:17:45.533 回答