CSS列 - 比列更多的元素

我正在處理2列的佈局。但是，我遇到了一些問題，因爲我的模板非常複雜，而且我無法爲每列提供一個div。CSS列 - 比列更多的元素

例如，我可能有類似：

<div class="column left"> 
    left column - part 1 
</div> 
<div class="column right"> 
    right column - part 1 
</div> 
<div class="column right"> 
    right column - part 2 
</div> 
<div class="column left"> 
    left column - part 2 
</div>

而我想要做的就是創建兩列，具有相同的寬度和它們之間沒有空孔（垂直）。通常情況下，它不會是一個問題，做到：

<div class="column left"> 
    left column - part 1 
    left column - part 2 
</div> 
<div class="column right"> 
    right column - part 1 
    right column - part 2 
</div>

而且，我的目標是有這死瀏覽器上運行，像IE7的解決方案。但是，我也希望看到僅在較新的瀏覽器中才支持的解決方案，因爲我認爲可能有一些有趣的解決方案。當然，有通過JS的解決方案，例如將所有.column.left的元素合併到一個div中，對.column.right合併同一個元素，但CSS解決方案會更好。

謝謝！

來源

2012-08-22 Matija Folnovic

如果您告訴我們您到目前爲止發現/嘗試了哪些CSS，並且儘可能詳細地描述了您的問題（您遇到了哪些特定問題等），它會有所幫助。 – Jeroen

我嘗試了一些經典的列布局方法，類似於Xilexio的答案。我也嘗試過通過JS工作，但不是我正在尋找的解決方案。 –

是否有不同列的div在沒有特定順序的要求？如果是這樣，那麼你不能通過純粹的CSS來實現它，因爲需要將某些元素放在另一列的元素之上。請參閱Use CSS to reorder DIVs。

如果這不是問題，嘗試在代碼和使用下面的CSS右列的div之前寫的所有左列的div：

.left { 
    float: left; 
    width: 100px; 
    clear: left; 
} 

.right { 
    margin-left: 100px; 
}

它創建了一個兩欄佈局。這種方法特別適用於列寬爲if的其中一列，但您可以通過將100px更改爲50%來達到您想要的效果。示例：http://jsfiddle.net/uQwUT/。

來源

2012-08-22 21:05:13 Xilexio

這就是我的想法。是的，要求是以任何順序工作。還在，tnx試試！ –

CSS列 - 比列更多的元素

回答

相關問題