html - 砌体风格的帖子不成功

我尝试了很多方法来为我的帖子创建砖石风格，尽管它几乎完美工作的唯一方法是float:left。但有时它们之间会出现一个空白，我正在寻找一个很好的解决方案，目前为止我正在添加我的css和html。

<script async src="//jsfiddle.net/ariefroni/gd9nna8m/4/embed/"></script>

jsfiddle:https://jsfiddle.net/ariefroni/gd9nna8m/4/
任何解决我问题的方法都是受欢迎的，谢谢。
如果需要的话，我也不介意使用脚本。

最佳答案

要创建砌体布局，我们可以使用应用于父元素的CSS属性column-count和column-gap来确定布局中的列数：

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

然后需要将此样式应用于每个子对象：

.item { /* Masonry bricks or child elements */
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

this tutorial将向您展示如何创建砖石风格的布局。Here's what you'll end up with。
演示标记如下：

<div class="masonry">
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
   <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div>
   <div class="item">Incidunt sit unde minima in nostrum?</div>
   <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div>
   <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div>
   <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div>
   <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div>
</div>

本教程还为较旧的浏览器提供了指向JS fallback的链接
这就是创建砖石风格布局所需的全部内容：）

关于html - 砌体风格的帖子不成功，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37563716/