html - 我如何给列表一个特定的高度，以便它们移动到它旁边的新列中？

Question

是否可以给列表（<ul>）一个特定的高度或类似的高度，如果项目太多，它只是将项目（<li>）移动到一个新列中？

我在这里说明了它：

红色框有一个特定的高度。当项目多于可用空间时，它应该简单地将它们移到下一行，就像在我的示例中使用“List7，List8，List9”一样

score 1 · Accepted Answer

像这样使用 CSS column-count ：

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

虽然它没有得到普遍支持，但受到挑战的浏览器会忽略它。对于他们来说，你必须做一些非语义的事情，比如手动将其拆分为多个 UL 并将它们浮动或同样可怕的事情。

score 1 · Accepted Answer

是的，您可以使用column-count：

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    height: 60px;
    width: 300px;
}

尽管并非所有浏览器都支持此功能。您可以使用 javascript 插件来填充，或者只使用渐进增强（毕竟这是一个列表）。

score 0 · Accepted Answer

一种快速的方法是使用float您的li标签，如下所示：

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
    float: left;
    border: 1px solid #0f0;
    width: 50px;
}

但这将为您提供以下结构：

List1    List2    List3
List4    List5

如果您特别需要您提供的图像中的结构，那么您可能需要使用 jQuery 查看一些动态渲染以获得完整的浏览器支持。

3 回答 3