将不同数量的元素（左右）浮动在两列中，即使具有不同的高度

Question

请参阅此jsFiddle：http://jsfiddle.net/jRGyS/

我想从块中创建两列，其中偶数（石灰）块向右浮动，奇数（蓝色）块向左浮动。但是，当块的高度变化时，布局会变得有点混乱，因为您可以看到最后一个蓝色块在另一个蓝色块上浮动，但是这个蓝色块应该保持向左，或者向右浮动。

问题是这些块将动态加载，并且高度始终不同。因此，您永远无法预测将会有多少，每个人的高度以及它们出现的顺序（除非在DOM加载后使用Javascript）。

一个想法案例就是没有Javascript，但如果不可能，可以使用JS。

Answer 1

使用clear：left和clear：就像在JSFiddle

中一样

div.block {
   background: blue;
   width: 100px;
   height: 100px;
   margin-bottom: 10px; 
}
div.block:nth-child(odd) {
   float: left;            
   clear: left;
}
div.block:nth-child(even) {
   background: lime;   
   float: right;            
   clear: right;
}