有没有办法做可重新流动的多列列表,其中列表可以使用只有有效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;
}
