浮动的垂直对齐方式：左div的

我有大约 10 个宽度相等但高度不同的 div，我希望它们尽可能紧密地组合在一起。

当设置为向左浮动时，它们不会垂直彼此对齐，而是与上面“行”的底部对齐。

我在下面模拟了一个小例子，想要去掉空白。你有什么建议吗。我仅限于使用这种格式，因为内容是外部交付的。

Cheers

<div style="width:500px;">
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:130px; background-color:#354689; float:left;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

尝试将第一个向左浮动，然后将下一个向右浮动，下一个向左浮动，下一个向右浮动......

编辑-回应评论。

如果你知道最大数量span是你将永远获取的（并且假设它不超过你所说的 10 个（因为这种方法可能很快就会变得非常混乱），并且假设 CSS3 不是一个选项，你可以尝试这样的事情，

<style>
    span, /* all spans get display and width, odd spans get float:left */
    span+span+span, 
    span+span+span+span+span, 
    span+span+span+span+span+span+span {
        display:block;
        width:250px;
        float:left;
    }

    span+span, /* even spans get float:right */
    span+span+span+span, 
    span+span+span+span+span+span, 
    span+span+span+span+span+span+span+span {
        float:right;
    }
</style>

你需要继续添加span+span+...直到您达到连续的最大数量。上面只匹配了八个。所以这不是最漂亮的方法！