浮动 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，尽管它们并不都在一个的正下方。

Answer 1

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

您可以通过将要堆叠的 div 放在一列中，然后浮动这些 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>

浮动 div 被压下

Floating divs being pushed down

css

css-float