我正在开发一个图片库元素，我正在使用此处找到的代码:http://cssdeck.com/labs/css-only-pinterest-style-columns-layout制作专栏。
我正在从 reddit 获取图像，一次 30 张，并将它们分成三列。我希望前三张图像最接近顶部，但现在它们都在最左边的列中。基本上我得到了
1 11 21
2 12 22
3 13 23
4 14 24
5 15 25
6 16 26
7 17 27
8 18 28
9 19 29
10 20 30
但我想要的是
1 2 3
4 5 6
7 8 9
10 11 12
13 14 15
16 17 18
19 20 21
22 23 24
25 26 27
28 29 30
或多或少。这些图像的高度都不同。就像每个图像出现一样，它会在当前最短的列中占据位置。
有什么方法可以在仍然使用 css 列的情况下做到这一点吗？
最佳答案
您可以使用float、nth-child和clear:带有列表的示例
li {
float:left;
list-style-type:none;
width:2em;
}
li:nth-child(3n+1) {
clear:left;
}
关于HTML5 列的内容从左到右，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21370731/