代码之家 › 专栏 › 技术社区 › Andrew Arrow

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

960.gs

1

Andrew Arrow · 技术社区 · 16 年前

如何使用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\u 16”类出于某种原因删除了颜色?我的目标是能够让页面的不同部分以不同的颜色贯穿整个页面,甚至超过960像素。因此,如果有人使他们的浏览器1200像素,左右两边都有正确的颜色,其余的网格系统都包含在中间的960个像素内。

2 回复 | 直到 16 年前

1

Jimmy Stenke 16 年前

好吧,为了理解原因,你需要理解网格布局是如何工作的。

问题是,当你告诉网格一定的宽度,它也使它浮动。也就是说你的外底有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>

2

0

Azeem.Butt 16 年前

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