将多个固定宽度/可变高度的盒子浮动到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

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

现在：

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

其他方式：

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

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