将多个固定宽度/可变高度的框浮动到 2 列

Question

我会尽力解释这一点。我有多个固定宽度但高度可变的 div。我想将这些框浮动到固定宽度容器内的两列中。当给他们一个浮点数时会发生什么：左值，我得到这样的东西：

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

（句号为空格）

我真正想要的是框 3 的顶部接触框 1 的底部。有什么简单的方法可以实现这一点？

编辑：希望找到适用于 2 列以上的解决方案。完美的解决方案将与弹性布局一起使用，并在水平方向上扩展到尽可能多的列。

Answer 1

你需要在你的盒子上左右交替浮动。

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

警告此代码与旧版浏览器不兼容，对于那些您可能希望每隔一个框以编程方式设置不同 CSS 类的浏览器。

Answer 2

不要横向工作，而是纵向工作。

现在：

左 右 1 ==> 2 3 ==> 4 5 ==> 6

其他方式：

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

所以基本上，将所有奇数 div 放在左列，将所有偶数 div 放在右列。如果您动态创建这些 div，请先将它们按奇数和偶数分组，然后将它们添加到相应的列中。