Question

我正在处理图片库项目，我正在使用此处的代码：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列的方法吗？

Answer 1

您可以使用float，nth-child＆amp; clear：带列表的示例

li {
  float:left;
  list-style-type:none;
  width:2em;
}
li:nth-child(3n+1) {
  clear:left;
}