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

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

我不知道我理解正確的話，我不熟悉960gs框架。我認爲這些專欄是根據百分比調整大小的，在這種情況下，我認爲我的解決方案將起作用。 也，你的容器需要有一個固定的高度，所以它會從上到下彩色。

因此，關鍵是：

在container_12
• ，把一個空 
• 設置其高度爲100％和背景whathever
• 設置保證金的權利，以便它等於完全其寬度

的相對看一看一個此http://codepen.io/joe/pen/bwBky

Answer 2

你可以做這樣的：

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