css - 3 列报纸布局中的许多 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

有三个解决方案，每个都有自己的问题。

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

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

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

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

最后，还有 CSS3 Column Module，它可以让您整齐轻松地创建列，但根本不支持 IE。

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