css - CSS 列水平排列

Question

是否可以水平订购 css 列？

以此为例：http: //jsfiddle.net/glee/Fa722/

它是输出，1 8 15但我想要1 2 3但仍然保持网格状结构是否有一些技巧可以用来实现这一点，或者 JS 是要走的路？

这就是我所说的网格状结构的意思：

Answer 1

像这样。使用浮点数，而不是列。

#limheight {
    height: 300px;
    width:600px;
}
#limheight li {
    float:left;
    padding-bottom: 20px;    
}
#limheight li a {
    color: rgb(0, 162, 232);
    display:block;
    width:200px;
}

Answer 2

您已经在使用 inline-block，因此它们会按照您的需要排列，只需指定宽度，它们就会排列成列。删除 #limeheight 中的 css 列并将宽度添加到 li：

http://jsfiddle.net/thespacebean/Fa722/30/

#limheight li {
   display: inline-block;
   padding-bottom: 20px;  
   width: 200px;
}

Answer 3

不是纯 CSS 的解决方案，但有同样的问题，发现 Packery 可以生成列但水平包装：

http://packery.metafizzy.co