網格系統如何補償列高度的變化？

下面我使用了12格960像素系統的提取。網格系統如何補償列高度的變化？

<style> 
body { 
    background: gray; 
} 

#container_12 { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background: white; 
    overflow: hidden; 
} 

.column_1, .column_2, .column_3, .column_4, .column_5, .column_6, .column_7, .column_8, .column_9, .column_10, .column_11, .column_12 { 
    float : left; 
    margin-left : 10px; 
    margin-right : 10px; 
    margin-bottom: 10px; 
} 

.column_1 { 
    width : 60px; 
} 

.column_2 { 
    width : 140px; 
} 

.column_3 { 
    width : 220px; 
} 

.column_4 { 
    width : 300px; 
} 

.column_5 { 
    width : 380px; 
} 

.column_6 { 
    width : 460px; 
} 

.column_7 { 
    width : 540px; 
} 

.column_8 { 
    width : 620px; 
} 

.column_9 { 
    width : 700px; 
} 

.column_10 { 
    width : 780px; 
} 

.column_11 { 
    width : 860px; 
} 

.column_12 { 
    width : 940px; 
} 

</style> 

<body> 
    <div id="container_12"> 

    <!-- First row --> 
     <div class="column_1" style="height: 400px; background: red;"> 
     </div> 
     <div class="column_11" style="height: 200px; background: red;"> 
     </div> 

    <!-- Second row --> 
    <!-- 
    This column overlaps into second row 
    <div class="column_1"> 
    </div> 
    --> 

     <div class="column_5" style="height: 200px; background: green;"> 
     </div> 
     <div class="column_3" style="height: 200px; background: green;"> 
     </div> 
     <div class="column_3" style="height: 200px; background: green;"> 
     </div> 

    </div> 
</body>

輸出：

http://jsfiddle.net/hnDtY/

現在讓我們假設，如果我複製上面的兩行一共有4排。但我想給前兩行的紫色背景和最後兩行白色背景：

http://jsfiddle.net/QZuED/

的問題，就是我上面所做的是我不得不創建一個新的div被稱爲「行」，並把它包圍繞着兩列。這使得它與佈局的其餘部分不一致，每個行都沒有div「行」。如果我在每行上添加一個div「行」並給它一個overflow：hidden屬性，那麼將不可能有一列跨越兩行，因爲它會將第二行中的項目向下推。那麼網格系統如何處理這種情況呢？

來源

2013-04-30 JohnMerlino

的確，嵌套在div內的塊會迫使他們無法擴展到其餘的內容。我發現最常用的答案是重複背景圖像。

body { 
    background: gray url(web.png) repeat-x; 
}

這也可以讓你使用淡入其餘背景的漸變。這是你的jsfiddle tweaked to reflect this。

來源

2013-04-30 06:50:30 OscillatingEthmoid

那麼這個系統是如何擺脫每行列周圍的行div的：http://www.responsivegridsystem.com/ – JohnMerlino 2013-04-30 14:16:03

因爲它不會試圖將任何div從一個「行」div擴展到另一個。它看起來很像你列出的第二個例子。也許我誤解了你？ – OscillatingEthmoid 2013-04-30 16:27:13

所以添加一個重複的背景圖像或嵌套在一個行中的多個列div與溢出屬性：隱藏是嚴重的唯一可能的解決方案（不訴諸表）？ – JohnMerlino 2013-04-30 22:54:27

網格系統如何補償列高度的變化？

回答

相關問題