Question

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

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

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基础的位置基于该高度。

为了帮助想象这一点，想象一下从右上角逐个滑动divs。一旦它溢出父容器，它就会沿着放置的最后一个元素向下滑动，直到它可以向左移动并适合父容器。这就是为什么第4个div低于第3个。然后下一个元素向下滑动3＆amp; 4，然后使用该高度（即行高）。

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

假设您无法使用固定高度的块...

您可以使用absolute定位手动将div's置于使用relative定位的容器中（但这显然无法响应）

您可能想要考虑使用像 masonry 这样的库。它是一个JS库，可以帮助解决这类常见问题。 http://masonry.desandro.com/

否则，您可能希望添加列divs以对其进行垂直分组。这将解决垂直间隙的问题。再次，这可能会出现响应性（即移动设备）的问题。

Answer 2

为此我们有一个2解决方案

在项目类

.item { 向左飘浮; 宽度：90px; 背景：黄色; 保证金权利：5px; margin-bottom：10px; 最小高度：150像素; }

或

为每行设置行div

<div class="list">   
    <div class="row">
       <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>  
    <div class="row">
       <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> 
</div>

.row{
 display:inline-block;
}

css浮动div创建垂直间隙

2 个答案: