类似砌体的无序列表只有css

Question

我听说过砖石，我听说过CSS3专栏，我想知道我是否可以简单地使用无序列表来生成类似砖石的网格或布局。

请考虑以下事项：我有一个包含八个项目的列表。每行有四个项目，高度未知。如果列表项显示为内联块，则如果上一行中的项包含更大的高度，则下一行将被下推。

结果如下：

您看到第二行是如何被按下的？我希望只有第一个项目被推下而其余项目保持不变。

期望的结果：

以下是演示列表：

<ul>
    <li style="height:125px;"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>This should be pulled up to maintain the margin bottom</</li>
    <li>This should be pulled up to maintain the margin bottom</</li>
    <li>This should be pulled up to maintain the margin bottom</</li>
</ul>

---

ul {
    list-style: none;
    font-size: 0; /** inline-block hack **/
}

ul li {
    font-size: 14px;

    display: inline-block;
    vertical-align: top; 

    margin-right:  calc((20px / 3) - 5px);
    margin-bottom: 5px;

    height: 100px;
    width: calc(25% - 5px); 
    border: 1px solid #222;

}

ul li:nth-child(4n + 4) {
   margin-right: 0; 
}

Fiddle

Answer 1

如果您不希望水平排序列表元素，我可以提供帮助。您可以使用列。

您希望将列表包装在容器中并在其上使用column-count。

我最近使用该技术编写了一个codepen来创建砌体效果。

如果你想要一个间隙，只需更改行之间的gabs的cap-property，对于顶部和底部，只需为列表元素添加边距。

Answer 2

* {
  box-sizing: border-box;
}

ul {
  display: block;
  margin: 0px;
  padding: 0px;
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}

li {
  display: inline-block;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

<ul>
  <li style="height:100px"></li>
  <li style="height:200px"></li>
  <li style="height:50px"></li>
  <li style="height:150px"></li>
</ul>