javascript - 在两列中浮动不同数量的元素，左右，即使高度不同

Question

请看这个 jsFiddle：http: //jsfiddle.net/jRGyS/

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

问题是这些块将被动态加载，并且总是在高度上变化。所以你永远无法预测会有多少，每个高度是多少，以及它们出现的顺序（可能在 DOM 加载后使用 Javascript 除外）。

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

Answer 1

在这个JSFiddle中使用 clear:left 和 clear:right

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;
}