浮动的div不能正确堆叠（没有间隙） [英] Floated divs won't stack properly (without gaps)

问题描述

我有一个有很多浮动物品的容器。问题是至少其中一个的大小发生变化时，会出现间隙。有什么办法可以迫使他们填补这些空白吗？

.wpr {}

 < div class =wpr > < span> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Donec pulvinar elit vitae lobortis tempor。请问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。请问quam maximus，iaculis lacus ut，volutpat lacus。 < /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> <跨度>< /跨度> < span>< / span>< / div>  

$ b

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

这里。根据本教程，您的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。请简单介绍一下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。请问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; 
背景：绿色; 
 min-height：130px; 
} 
  

这将为您提供以下砌体布局，您可以在这个图片，我认为你正在寻找！您可以在 Codepen 中查看上述代码。

I have a container with many floated items. The problem is when the size of at least one of them changes, a gap occurs. Is there any way to force them to fill these gaps?

.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/

解决方案

In order to achieve what you ask you have to create a masonry layout. You can use a JQuery plugin as @git-e-up mentions above since it can be rather difficult to achieve it using only CSS. However, should you like a pure CSS solution, you can find a very nice tutorial here. According to this tutorial, your HTML code should change as follows:

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

Note that the initial .wrp and .span structure has been replaced by a three level structure. The CSS rules should change accordingly to:

.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 will give you the following masonry layout that you can see in this image, which I think is what you are looking for! You can check the above code in Codepen.

这篇关于浮动的div不能正确堆叠（没有间隙）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！