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。

此处示例：

＆＃13;

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

＆＃13;

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

＆＃13;

浮动div被推下

1 个答案: