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>

DEMO：http://jsfiddle.net/zcvybdx3/

Answer 1

您可以在.wpr类中添加类似的内容：

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

虽然有点hacky，我认为它确实需要最大高度。您还可以查看像https://isotope.metafizzy.co/layout-modes/masonry.html

这样的jquery插件

Answer 2

您可以使用flexbox填补空白，以便每一行都具有相同的高度而无间隙：

  $( 'table caption' ).each( function() {
      var tableBottomColor =  $( this ).css( 'backgroundColor' );
      //add colored footers to all tables

    $('<div class="tablebottom" style="background-color:' + tableBottomColor+'"></div>').insertAfter($(this).parent());

    });

一个工作示例：

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;
}

Answer 3

为了实现您的要求，您必须创建一个砌体布局。您可以使用JQuery插件作为上面提到的@ git-e-up，因为仅使用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图片中可以看到的砌体布局，我认为这是您正在寻找的内容！您可以在Codepen中查看上述代码。

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

3 个答案: