html - 是否可以使用 CSS 实现这种网格布局

Question

我想实现与此类似的布局

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

我不明白为什么第二行列表项以这种方式定位而不是嵌套在第一行中？

Answer 1

在这里查看演示

你可以通过 column-count 和 column-gap

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