css - float div 被压下

Question

我不确定为什么会这样，我在寻找解决方案时遇到了很多麻烦，所以这里简单明了

HTML

<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div id="big" class="thing"></div>
<div class="thing"></div>

CSS

.thing {
    background-color: blue;
    height: 100px;
    width: 80px;
    margin: 20px 0 0 20px;
    display: inline-block;
    float: left;
}

#big {
    height: 140px;
}

JSFiddle:https://jsfiddle.net/sdmq155g/1/

底部的蓝色 div 不应该向下推，除非它们上面有一个大的 div。它们都应该位于它们上方的 div 下方。但出于某种原因，它们的所有位置都基于顶行中较大的 div，即使它们并不都在一个 div 的正下方。

Answer 1

所有浏览器实现的框模型的行为与您的 jsFiddle 演示的方式完全相同。蓝色 div 不会相互依偎，但实际上它们会根据上一行中最高的元素从下一行开始。

您可以通过将要堆叠的 div 放在一列中，然后 float 这些 div 来解决这个问题。

这里的例子:

.col {
    float: left;
    width: 80px;
}
.thing {
    background-color: blue;
    border: solid 1px red;
    height: 100px;
}

#big {
    height: 140px;
}

<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div id="big" class="thing"></div>
    <div class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>
<div class="col">
    <div class="thing"></div>
    <div id="big" class="thing"></div>
</div>