html - float 的 div 无法正确堆叠(没有间隙)

Question

我有一个装有许多 float 元素的容器。问题是当其中至少一个的大小发生变化时，就会出现间隙。有什么办法可以迫使他们填补这些空白吗？

.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 类中添加这样的东西:

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

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