list - 多列 CSS 列表

Question

有没有办法只使用有效的 CSS 制作可重排多列列表，其中列表可以包含不同高度的列表项？可重新流动是指当用户将窗口拖动得更宽或更窄时，当列表项的宽度固定时，列数应自动调整。

我看过关于 A List Apart 的文章，但他们的解决方案都不符合所有这些(看似简单的)要求。乍一看，我认为针对多列列表的 CCS3 提案也没有(因为看起来您必须指定列数)。

如果有帮助，我根本不关心 IE6，只关心 IE7。我的目标受众是早期采用者、精通网络的类型。

更新:仔细查看 CSS3 规范，指定列宽应该这样做，但实际上，我遇到了溢出等问题。有人在 IRL 使用这个东西吗？

Answer 1

原帖

事实上，单个命令就可以解决问题(尽管它出现在 -webkit- 和 -moz- 版本中):

div.wrapper 
{
    -webkit-column-width: 10em;
    -moz-column-width: 10em;
}

这里有一些额外的规则来提高可读性。将下面和上面的代码插入 A List Apart 文章的示例中(如果有人清除版权，我可以粘贴整个 HTML)并享受:

div.wrapper {       
    border: 2px solid blue;
    -webkit-column-rule: 2px solid blue;
    -moz-column-rule: 2px solid blue;
}

.wrapper ol {
    margin: 0;
}

.wrapper br {
    display: none; /* Extra BR is unnecessary there */
}

已测试:Safari 4 (4528.17)、Fx 3.5b4/Mac。

注意 前段时间第一次遇到column-width 属性时，我完全忽略了它进行再平衡这一关键事实。现在在 W3C 发现它并用 Surfin' Safari 确认.

附录:固定列数

据我了解，列的宽度应该随着页面的宽度而变化，所以命令更像是

div.wrapper 
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

附录:垂直滚动

现在你说应该有一个垂直滚动条。由于没有 UI 可以在每一列的右侧做单独的滚动条，我想你已经想到了一个可以滚动整个多列列表的滚动条。这可以通过用

包装一个 div 来完成

div.morewrap 
{
     height: 50%; /* whatever you need */
     overflow-y: scroll; 
}