Css 浮子的垂直对齐：左div'；s

我有大约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>

---

试着先向左浮动第一个，然后向右浮动下一个，再向左浮动下一个，再向右浮动下一个

编辑-回应评论

如果您知道您将获取的

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获得显示和宽度，奇数span获得浮动：左*/
span+span+span，
span+span+span+span+span+span，
span+span+span+span+span+span+span+span+span{
显示：块；
宽度：250px；
浮动：左；
}
span+span，/*偶数span获得浮点：对*/
span+span+span+span+span，
span+span+span+span+span+span+span+span，
span+span+span+span+span+span+span+span+span+span+span+span{
浮动：对；
}

---

你需要不断地添加

span+span+…

，直到达到你将拥有的最大连续数为止。上面只匹配八个。因此这不是最漂亮的方法！

你的场景需要更多的说明

如果它们总是相同的高度，您可以对它们的排列进行硬编码。要修复模型，请执行以下操作：

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

谢谢你的回答。是否有一种方法可以单独使用css进行替换？不幸的是，一旦交付，我无法更改内容、id或类。当您检索它时，是否与您的示例中应用的样式相同？以及，每个div上的id和类是什么？当检索数据时，它实际上以：内容-不完全相同的形式到达一个方便的格式：（好的，当你说你有“大约10”你知道会有多少吗？还有，CSS是唯一的选项吗，javascript有空间吗？最后，这个解决方案需要多大的可移植性，我正在阅读关于CSS3

：nth child

伪类的文章，想知道这是否有帮助，但我不知道它的支持程度有多好。谢谢tjm。我有很多关于CSS3

：nth child

伪类的文章这是唯一的选择-没有javascript。第：n个孩子看起来是我们唯一的选择，但我担心兼容性。真不敢相信这么简单的东西这么难-我想我错过了一些basicA多列方法最好的东西。有一些浏览器的javascript修复程序不支持所需的css3。这一切都取决于你想要什么s从左到右或从上到下填充的div。