css - float :left div's 的垂直对齐

Question

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

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

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

干杯

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

Answer 1

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

编辑 - 回应评论。

如果您知道您将要获取的 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+...，直到达到您将拥有的最大连续数。以上只匹配八个。所以这不是最漂亮的方法!