Question

如何使用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像素。因此，如果有人将浏览器设为1200px，则左右两侧的颜色正确，网格系统的其余部分都包含在中间的960像素内。

我可以为'body'添加一个背景颜色来做这个只有1种颜色，但我想在页面中有多种颜色。像不同颜色的横条纹。感谢。

Answer 1

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

问题在于，当你告诉网格是一定宽度时，它也会使它浮动。这意味着你的外部div的高度为0px。所以，简而言之。它不会删除背景颜色，它只是没有显示它，因为没有任何东西可以显示（你的网格浮在它上面，所以实际大小并不重要。

要解决它，只需在容器中添加一个clearfix即可解决。但是，您还需要考虑divs默认继承背景颜色。

  <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>

Answer 2

并排放置两个网格容器并不是生成水平条纹的非常智能的方法。如果你想让一些容器突破网格的边界，那么适当地调整它们的边距，或者将它们完全放在网格的后面（和外部）。

如何使用960.gs使左右排水沟的颜色不同？

2 个答案: