是否有可能用CSS实现这种网格布局

Question

我想实现与此类似的布局

问题是我只需要使用一个 UL 作为框并使其水平。所以这就是我所做的： 我创建了 UL ，其中的列表项互相浮动，但不是实现这一点 - 这是发生的事情：

我无法理解为什么第二行列表项会以这种方式定位而不是嵌套到第一行？

Answer 1

查看 Demo Here

您可以通过列数和列间距

来实现

HTML

<ul>
    <li>
        <img src="http://placehold.it/200x300/" />
    </li>
    <li>
        <img src="http://placehold.it/200x400/" />
    </li>
    <li>
        <img src="http://placehold.it/200x500/" />
    </li>
    <li>
        <img src="http://placehold.it/200x500/" />
    </li>
    <li>
        <img src="http://placehold.it/200x400/" />
    </li>
    <li>
        <img src="http://placehold.it/200x200/" />
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
    width: 660px;
    margin: 10px;
}
li {
    width: 200px;
}