HTML列表元素从上到下，然后从左到右

Question

我想要列出一堆项目。高度是固定的。所以当列表到达底部时，我希望它环绕并开始一个新列。有没有办法，不知道每个项目的高度，在css中这样做？这样，溢出将水平发生。

Answer 1

我想不出用css来实现这个目的的方法，但是如果你不反对jquery，请查看：http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 2

选中此CSS Trick

关键是这个CSS：

    ul {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

它会完全按照你的要求行事。

Answer 3

针对多列提出了一个CSS 3属性（有关使用专有属性的示例，请参阅Quirksmode.org -- Columns），但尚未在所有现代浏览器中支持。即便如此，我也不确定支持在支持它的浏览器中是否可重复，正如人们所希望的那样。

Answer 4

您可以使用CSS3列。

这是一个小提琴：fiddle，这里是WC3 spec

Answer 5

你为什么不用JavaScript？它简单并且与所有浏览器兼容

如果你选择CSS3，那么IE（The Useless浏览器）将不支持它。

我会给你一个javascript的提示

只计算你父母Div的高度

   var height = document.getElementById("ParentDiv").style.height;

创建具有相同高度的子div，并在其中添加Divs new child div。

如果孩子div的高度超过父div

创建另一个子div并继续该过程。

此过程非常繁忙但会支持所有浏览器

当jQuery-plugins是好的选择但我个​​人觉得如果他们能做到这一点就可以做到。

一切顺利