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

Question

我想实现类似这样的布局

问题是我只需要为盒子使用一个 UL 并使其水平放置。所以这就是我所做的: 我创建了 UL ，其中的列表项相互 float ，但没有实现这一点 - 这是发生了什么:

我不明白为什么列表项的第二行会变成那样而不是嵌套在第一行中？

Answer 1

查看 Demo Here

你可以通过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;
}