float:left div 的垂直对齐方式

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

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

编辑 - 响应 cmets。

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

Answer 2

您的方案可以使用更多说明。

如果它们的高度始终相同，您可以对它们的排列进行硬编码。修复您的模型：

<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; margin-top: -80px;"></div>
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
</div>

但这很明显，可能对您没有帮助，因为它们可能具有不确定的随机高度。在这种情况下，由于它们始终具有相同的宽度并且您总是有 10 个，因此您可以将它们分成 3 或 4 个垂直堆叠，然后使每个堆叠彼此齐平。

<div style="width:250px; float:left;">
<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>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:90px; background-color:#181; float:left;"></div>
<div style="display:block; width:250px; height:180px; background-color:red; float:left;"></div>
<div style="display:block; width:250px; height:100px; background-color:#333; float:left;"></div>
</div>
<div style="width:250px; float:left;">
<div style="display:block; width:250px; height:80px; background-color:#333; float:left;"></div>
<div style="display:block; width:250px; height:140px; background-color:#888; float:left;"></div>
<div style="display:block; width:250px; height:160px; background-color:#354689; float:left;"></div>
</div>