浮动 div 被向下推答案

【问题标题】：Floating divs being pushed down浮动 div 被向下推
【发布时间】：2015-08-13 10:23:21
【问题描述】：

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

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，即使它们并非都在一个以下。

【问题讨论】：

看起来你想要一个网格外观。不幸的是，如果不使用 javascript，就无法创建这种样式。您可以使用砌体来创建它。更多信息：stackoverflow.com/questions/11434756/…
谢谢，这看起来很有用。编写自定义 tumblr 主题时是否可以使用 masonry javascript？
是的，这很容易做到。 tumblr 上有很多使用砖石的东西。甚至 tumblr 的存档也使用该系统。这是有关如何操作的链接buildthemes.tumblr.com/ch5/infinite-scroll-and-grid

标签： css css-float

【解决方案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 列表中从左到右添加“事物”，就像 Pinterest 使用他们的 pin 一样。