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

我正在使用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>

A.
B
C
A.
B
C

---

我想设置样式，使列1-3具有给定的背景颜色。这意味着a div的前三列、a div和B div的前两列将具有这种颜色。基本上，我想设计柱的样式，而不是网格。这可能吗？

您可以这样做：

.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;
}

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

---

工作示例：

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

因此，诀窍在于：

• 在你的容器里，放一个空的
• 将其高度设置为100%，背景设置为任何值
• 将其边距设置为右侧，使其与宽度正好相反

---

看看这个

我认为这里发生的事情是，你对网格系统的想法并不完全符合它们的用途。这很好，因为我最近才开始使用网格系统

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

.grid\u 4

、

.grid\u 8

和

.grid\u 12

是列，而不是单元格。如果希望

div

a和

div

a位于第一列，可以将它们依次放入

.grid\u 4 alpha

中

由于网格系统不是用来设计样式的，所以应该避免设计网格CSS的样式，而是创建自己的样式

因此，您的HTML最终将如下所示：

.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;
}

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

---

这将设置特定轴网的样式，而不是特定柱的样式。例如，如果我有更多的东西，甚至更多的东西，中间的网格将被样式化。不管我如何组织这些列中的网格，我都想设置这些列的样式。@Jamesport仍然不能100%确定您在寻找什么，但请尝试我更新的答案