Question

我试图在很多方面为我的帖子创建砌体样式，但它唯一完美的工作方式是float：left。但有时他们之间会出现差距，我正在为这个问题寻找一个好的解决方案，明智的是我到目前为止已经添加了我的CSS和HTML。

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

jsfiddle：https://jsfiddle.net/ariefroni/gd9nna8m/4/

我的问题的任何解决方案都是受欢迎的，谢谢。如果需要，我也不介意使用脚本。

Answer 1

要创建一个砌体布局，我们可以使用应用于父元素的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的链接

这就是创建砌体式布局所需的全部内容：）

砌成式的帖子不成功

1 个答案: