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

Question

我想实现与此类似的布局

问题是我只需要使用一个UL用于盒子并使其水平.所以这就是我所做的:我创建了UL,其中的列表项是相互浮动的,但不是实现这一点 - 这是发生的事情:

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

Answer 1

看看这里的演示

您可以通过列数和列间距来实现

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