三栏报纸布局中的许多div

Question

目前我有一些未定义长度/高度的div。它们包含一些超链接作为列表。 通过给出这些div float:left; width:150px; margin: 10px;来实现几乎所需的效果 但是，在第一个div只包含1个链接的场景中，第二个div包含10个，我得到以下结果（数字代表div）：

1  2  5
   3  6
   4  7
8

当然，期望的结果如下

1  3  6          1  4  7
2  4  7    or    2  5  8
   5  8          3  6

Answer 1

有三个解决方案，每个解决方案都存在问题。

首先，您可以为所有项目设置高度限制，或使用固定高度。这与overflow属性相结合，将为您提供整齐的项目网格。

ul li {
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
}

或者，您可以将div拉入三个不同的容器中，每个容器都单独浮动。这也将为您提供三列，但您可能需要在服务器端执行某些操作以确保每列中元素的高度均匀分布：

ul {
    float: left;
    width: 200px;
}

最后，还有CSS3列模块，它允许您整齐，轻松地创建列，但根本不支持IE。

ul {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
}