css - 3 列报纸布局中的许多 div

Question

目前我有一些未定义长度/高度的 div。它们包含一些超链接作为列表。通过给这些 div float:left; 实现了几乎想要的效果。宽度:150px；边距: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 拉入三个不同的容器，每个容器单独 float 。这也将为您提供三列，但您可能需要在服务器端做一些事情以确保每列中元素的高度均匀分布:

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

最后，还有 CSS3 Column Module，它可以让您整齐而轻松地创建列，但在 IE 上完全不支持。

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