2010-04-04 44 views
1

如何使用960.gs製作左右水槽的不同顏色?當我嘗試一些簡單的東西時:如何用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像素。因此,如果有人使瀏覽器的瀏覽器爲1200像素,則左側和右側具有正確的顏色,而網格系統的其餘部分都包含在中間的960像素內。

我可以添加一個背景顏色到'身體'來做到這一點只有一種顏色,但我想在頁面中有多種顏色。像不同顏色的橫條紋。謝謝。

回答

1

那麼,瞭解你需要了解網格佈局如何工作的原因。

事情是,當你告訴網格是一定的寬度,它也使它漂浮。 這意味着你的外部div的高度爲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> 
0

堅持兩個格容器並排側是不是非常聰明的方式來產生水平條紋如果你想要一些容器突破網格的邊界,那麼適當調整它們的邊距,或者把它們完全放在網格的後面(和外面)