Question

我正在使用960网格系统进行网站设计，我希望能够更改特定列的背景颜色。我已经想出如何通过做类似

的方式来改变整个容器的背景颜色

.container_12 {
  background-color: #000000;
  overflow: hidden; /* so that the margin is transparent */
}

但是，如果我想改变第1-3列的背景颜色怎么办？我希望颜色一直到容器的底部。

实施例。假设我有一些类似的HTML：

<div class="container_12">
  <div class="grid_4 alpha"> a </div>
  <div class="grid_4"> b </div>
  <div class="grid_4 omega"> c </div>
  <div class="grid_1 alpha"> A </div>
  <div class="grid_10"> B </div>
  <div class="grid_1 omega"> C </div>
</div>

我想要设置样式，以便第1-3列具有给定的背景颜色。这意味着一个div的前三列，A div和B div的前两列将具有这种颜色。基本上我想要设置列，而不是网格。这可能吗？

Answer 1

你可以这样做：

.grid_4.alpha, .grid_1.alpha {
    background-color: blue;
}

.grid_4, .grid_10 {
    background-color: red;
}

.grid_4.omega, .grid_1.omega {
    background-color: green;
}

工作示例：http://jsfiddle.net/fewds/tnMhc/

Answer 2

我不确定我是否正确理解它并且我不熟悉960gs框架。我认为根据百分比调整列的大小，在这种情况下，我认为我的解决方案将起作用。此外，您的容器需要有一个固定的高度，因此它将从上到下着色。

所以诀窍是：

，放空
将其高度设置为100％，将背景设置为
将其设置为margin-right，使其与其宽度完全相反

看看这个http://codepen.io/joe/pen/bwBky

Answer 3

我认为这里发生的事情是你对网格系统的想法并不完全是他们的意图。这非常好，因为我最近才开始使用网格系统！

网格系统旨在为您的内容提供结构，而不是样式。

.grid_4，.grid_8和.grid_12是列，而不是单元格。如果您希望div a和div A位于第一列，您可以将它们一个接一个地放在.grid_4 alpha中。

由于网格系统不适合样式化，因此您应该避免使用网格CSS样式，而是创建自己的样式。

所以你的HTML最终看起来像这样：

<div class="container_12">
  <div class="grid_4 alpha red-column">
    <div>Content-a</div>
    <div>Content-A</div>
  </div>
  <div class="grid_4 green-column">
    <div>Content-b</div>
    <div>Content-B</b>
  </div>
  <div class="grid_4 omega blue-column">
    <div>Content-c</div>
    <div>Content-C</div>
  </div>
</div>

然后你将它添加到你的CSS：

.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}

960gs：更改特定列的背景颜色

3 个答案: