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

Question

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

Answer 1

关键是这个CSS：



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

它将完全按照您的要求进行。

Answer 2

我想不出一种使用CSS来完成此操作的方法，但是如果您不反对jquery，请查看以下内容： http : //welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

对于多列，有一个建议的CSS 3属性（有关专有属性的示例，请参阅Quirksmode.org-列），但是并非所有现代浏览器都支持该属性。 即使这样，我仍不确定该支持在支持它的浏览器中是否可以像人们希望的那样重复。

Answer 4

您可以使用CSS3列。

这里有一个小提琴：小提琴和这里的WC3规范

Answer 5

为什么不使用JavaScript。 它简单且与所有浏览器兼容

如果您使用CSS3，则IE（无用浏览器）将不支持它。

我会给你一个关于javascript的提示

只是计算你的父母的身高

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

创建具有相同高度的子div，然后在其中添加新的子div。

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

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

此过程比较忙，但将支持所有浏览器

当jQuery插件是不错的选择，但我个人认为，如果可以，则可以做到。

祝一切顺利