html - css float div 创建垂直间隙

Question

我的问题类似于this question , 但我有不同的要求，所以想问一个单独的问题

我正在尝试创建一系列 div 并以三列布局显示它们。

布局如图http://jsfiddle.net/o595n5tr/3/ .

HTML

<div class="list">
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet,</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
    <div class="item">Lorem ipsum dolor sit amet</div>
</div>

CSS

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    *zoom: 1;
}

.list{
    width: 300px;
}

.item{
    float: left;
    width: 90px;
    background: yellow;
    margin-right: 5px;
    margin-bottom: 10px;
}

.item:nth-child(3){
    background: brown;
}

.item:nth-child(5){
    background: red;
}

谁能告诉我为什么第一个 div 和它下面的红色 div 之间有一个垂直间隙。也请你告诉我如何弥补这个差距。

顺便说一句，第四列出现在第三列下方我没问题，这就是我想要的。

提前致谢

Answer 1

差距是由列表中第 3 个和第 4 个 div 的高度引起的。正如 @K.M.B 提到的那样，您使用 float: left 以行方式分组。因此，一旦列表 div 的上一个溢出其父级，它就会采用放置的最后一个 div(第 4 个)的高度，并以此为基础放置下一个 div。

为了帮助形象化这一点，想象一下从右上角将 div 一个一个地滑入。一旦它溢出父容器，它就会沿着最后一个放置的元素向下滑动，直到它可以向左移动并适合父容器。这就是为什么第 4 个 div 在第 3 个下面。然后下一个元素向下滑动 3 & 4，然后使用该高度(即行高)。

如果将display 模式更改为inline-block。您可以看到相反的效果正在发生。 http://jsfiddle.net/o595n5tr/6/

假设您不能为 block 使用固定高度...

您可以使用 absolute 定位将 div 的 手动放置在使用 relative 定位的容器中(但这显然不会响应)

您可能想考虑使用像ma​​sonry 这样的库。它是一个有助于解决此类常见问题的 JS 库。 http://masonry.desandro.com/

否则，您可能需要添加列 divs 以将它们垂直分组。这将解决您的垂直间隙问题。同样，这可能会导致响应能力(即移动设备)出现问题。