將多個固定寬度/高度可變高度框浮動爲2列

我會盡我所能解釋這一點。我有多個固定寬度但高度可變的div。我想將這些框浮動到固定寬度容器內的兩列中。左值，我得到的是這樣的：當給他們所有的浮動會發生什麼將多個固定寬度/高度可變高度框浮動爲2列

######### ######### 
# box 1 # # box 2 # 
######### # ..... # 
......... # ..... # 
......... ######### 
######### ######### 
# box 3 # # box 4 # 
# ..... # # ..... # 
######### ######### 
######### ######### 
# box 5 # # box 6 # 
# ..... # ######### 
# ..... # 
#########

（週期均爲空白）

我真的真的很喜歡的是盒子3的頂部觸摸框1的底部。有什麼簡單的方法可以達到這個目的？

編輯：想找到適用於2列以上的解決方案。完美的飲料可以使用彈性佈局，並且可以傳播到水平放置在屏幕上的許多列。

來源

2010-05-11 Jeremy H

您需要在您的方框上左右浮動。

.box:nth-child(2n+1){ 
    float: left; 
    } 
    .box:nth-child(2n){ 
    float: right; 
    }

警告這段代碼是不老的瀏覽器兼容，對於那些你可能想以編程方式設置不同的CSS類每個其他箱。

來源

2010-05-11 23:24:01

哇，那太瘋狂了。從來沒有見過這樣的CSS。任何方式使這個工作與3列而不是2？似乎與左/右浮動改變它不適用於第三中間列。 – 2010-05-12 15:33:47

您可以嘗試使用沒有任何浮動行爲的中間列，因此它將停留在中間。 .box：第n個孩子（3n + 1）{float：left; } .box：nth-child（3n）{float：right; } 但在某些時候，您可能需要利用CSS3列屬性（目前僅適用於基於Mozilla或Webkit的瀏覽器）-webkit-column-count：3; – 2010-05-17 11:36:28

這個解決方案的問題是它不會允許最佳的盒子放置。例如，即使箱子3的縱向足夠大以至於它可以容納箱子4和箱子5，箱子5仍然會被踢到左側。我正在尋找一種解決方案來優化投放位置，我相信Jeremy也在尋找同樣的東西。 – syockit 2011-03-05 08:47:55

而不是水平工作，垂直工作。

現在：

 
L  R 
1 ==> 2 
3 ==> 4 
5 ==> 6

其他方式：

L R 
1 2 
\/ \/ 
3 4 
\/ \/ 
5 6

因此，基本上，把在左欄所有奇數的div，所有在右列偶數的div。如果您動態創建這些div，首先將它們按奇數和偶數分組，然後將它們添加到適當的列。

來源

2010-05-11 02:00:51 Alec

嗨亞歷克 - 是的，divs是動態創建的，所以我試圖不必做任何額外的處理不是不必要的。我希望CSS能爲我處理。似乎這可能是我唯一的選擇，但要改變div的動態創建。 – 2010-05-11 02:06:04

將多個固定寬度/高度可變高度框浮動爲2列

回答

相關問題