Question

Currently I have a number of divs of undefined length/height. they contain a few hyperlinks as a list. The almost-desired effect is achieved by giving these divs float:left; width:150px; margin: 10px; However, in the scenario of the first div containing just 1 link, and the second div containing 10 I get the following result (numbers represent divs):

预期成果如下:

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;
}

或者,您可将<条码>div上载到三个不同的集装箱内,每个集装箱都单独浮动。这还将给你三栏,但你可能需要做一些服务器,以确保每栏内容的高度均衡分布:

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

最后,有CSS3号插图,使你能够轻而易举地制造一栏,但根本得不到EE的支持。

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

友情链接