多列CSS列表

有没有办法做可重新流动的多列列表,其中列表可以使用只有有效CSS 的不同高度的列表项？通过可重复流动,我的意思是当用户拖动窗口更宽或更窄时,当列表项具有固定宽度时,列数应自动调整.

我已经看过A List Apart上的文章,但他们的解决方案都不适合所有这些(看似简单的)要求.乍一看,我认为多列列表的CCS3提议也没有(因为看起来你必须指定列数).

如果有帮助,我不是在所有关心IE6只有样的关心IE7.我的目标受众是早期采用者,精通网络的类型.

更新:仔细观察CSS3规范,指定列宽应该这样做,但实际上,我遇到了溢出等问题的怪异.有人用这种东西IRL吗？

原帖

事实上,单个命令对我有用(虽然它有-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.

请注意,在前一次遇到列宽属性时,我完全错过了重新平衡的关键事实.现在在W3C发现它并与Surfin'Safari确认.

附录:固定列数

正如我从澄清中理解的那样,列的宽度应该随页面的宽度而变化,因此命令更像是

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

附录:垂直滚动

现在你说应该有一个垂直滚动条.由于没有用户界面可以在每列的右侧单独设置滚动条,因此我认为您需要一个可以滚动整个多列列表的滚动条.这可以通过包装一个更要做div有

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