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

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>

float的垂直对齐方式：left div's

2 个答案: