使用CSS能否实现这种网格布局？

Question

使用CSS能否实现这种网格布局？

htmlcss

4

我希望能够实现类似于这样的布局: enter image description here

问题在于我需要仅使用一个UL标签来放置所有的框，并且横向排列。所以我做了以下尝试：我创建了一个UL，里面的列表项都向左浮动，但是并没有达到想要的效果，如下图所示： enter image description here

我无法理解为什么第二行的列表项会这样排列，而不是嵌套在第一行中呢？

- cyrat

1

使用jQuery Masonry来实现这个。 - Tamil Selvan C

如果您在JSFiddle上发布您的代码，别人帮助您将更加容易。 - Joey

通常我会看到这种布局是通过JavaScript和生成的绝对定位框来实现的。第二个图像正是使用float：left;获得的行为。想象一下盒子从一侧漂浮进入，由于第一行已经满了，所以其他盒子使用第二行。空白处属于第一行。 - kleinfreund

你需要访问http://masonry.desandro.com/。 - Mr. Alien

@Joey，我没有发布我的代码，因为它很简单。UL + li 左浮动。Kleinfreund 先生，如果我理解正确的话 - 没有纯 CSS + HTML 解决方案可以做到这一点吗？ - cyrat

我不是完全确定。我不知道flexbox是否能帮助到你。但你无法使用浮动或 display:inline-block; 来实现这一点。 - kleinfreund

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikas Ghodke · Accepted Answer

查看演示

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