浮动的 div 无法正确堆叠（没有间隙）

Question

我有一个装有许多漂浮物品的容器。问题是当其中至少一个的大小发生变化时，就会出现间隙。有没有办法强制他们填补这些空白？

.wpr {
  padding: 20px;
}

.wpr span {
  width: 260px;
  min-height: 130px;
  background: green;
  float: left;
  margin: 10px;
}

<div class="wpr">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.
         </span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

演示：http://jsfiddle.net/zcvybdx3/

Answer 1

您可以将类似这样的内容添加到您的 .wpr class：

    display: flex;
    flex-flow: column wrap;
    max-height: 800px;

虽然这有点老套，但我认为它确实需要最大高度。您还可以查看 jquery 插件，例如 https://isotope.metafizzy.co/layout-modes/masonry.html

Answer 2

您可以使用 flexbox 来填充空隙，使每一行的高度相同且没有空隙：

display: flex;
flex-flow: row wrap;

一个工作示例：

.wpr {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
}

.wpr span {
  width: calc(50% - 20px);
  min-height: 130px;
  background: green;
  margin: 10px;
  display: block;
}

<div class="wpr">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 3

为了实现您的要求，您必须创建一个砌体布局。您可以使用上面提到的 @git-e-up 中的 JQuery 插件，因为仅使用 CSS 很难实现它。但是，如果您喜欢纯粹的 CSS 解决方案，您可以找到一个非常好的教程 here。根据本教程，您的 HTML 代码应更改如下：

<div class="masonry-layout">
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit 
vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat 
lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae 
lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            2
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            3
        </div>
    </div>
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            4
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            5
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            6
        </div>
    </div>  
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            7
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            8
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            9
        </div>
    </div> 
    <div class="masonry-layout__panel">
        <div class="masonry-layout__panel-content">
            10
        </div>
    </div>
</div>

请注意，最初的 .wrp 和 .span 结构已被三级结构取代。 CSS 规则应相应更改为：

.masonry-layout {
    column-width: 270px;
    column-gap: 0;
}
.masonry-layout__panel {
    break-inside: avoid;
    padding: 5px;
}
.masonry-layout__panel-content {
    padding: 20px;
    border-radius: 10px;
    background: green;
    min-height: 130px;
}

这将为您提供在 this image, which I think is what you are looking for! You can check the above code in Codepen 中可以看到的以下砌体布局。

浮动的 div 无法正确堆叠（没有间隙）

Floated divs won't stack properly (without gaps)

html

css

css-float