Question

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

我在A List Apart上看过这篇文章，但他们的解决方案都没有适合所有这些（看似简单的）要求。乍一看，我认为多列列表的CCS3提议也没有（因为看起来你必须指定列数）。

如果它有帮助，我不是在所有关注IE6而只是关心IE7。我的目标受众是早期采用者，精通网络的类型。

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

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。

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

附录：固定列数

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

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

附录：垂直滚动

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

来完成

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

Answer 2

使用CSS multi-column layouts，可以指定列数（在调整大小时会变宽或缩小） OR 列的宽度（这将导致新列在调整大小时添加或删除）：

ul li {
    margin-left: 1em; /* needed to preserve bullets */
    column-break-inside: avoid; /* don't forget this */
}
ul {
    list-style: outside disc;
    padding-left: 0.5em;
    column-width: 150px; /* actually the minimum width */
}

http://jsfiddle.net/mblase75/XtzLF/

Answer 3

不是通过普通的CSS，不是。可能在某处有一个JavaScript实现，但我不知道你描述的任何流畅的实现。

Answer 4

我意识到这是一个老帖子，但我刚刚开始研究我的项目，而Ilya的解决方案对我来说并不起作用（尽管我可能错过了一些东西）。无论如何，问题是，对于CSS3列（现在是候选推荐），溢出想要通过创建其他列来向右移动，如果你有溢出：自动你最终得到一个水平滚动条而不是垂直滚动条（ OP想要的，我也想要）。我通过将包含列（使用-moz-column-count set）的div包装在另一个div中，并使用overflow-y：auto设置高度来修复此问题。这意味着外部div可以垂直滚动，而带有列的内部div具有所需的高度，并且不需要水平溢出。

我希望有所帮助。

Answer 5

我最近需要在项目中使用多列列表。我们正在使用CSS3列，并在此过程中遇到了几个小问题。我在这里发表了一篇关于它的文章：http://bit.ly/css3lists

缺点是：

仅设置列数和宽度，而不是列宽。
如果您不希望内容分解多个列，则需要添加一些额外的标记以使列表正确呈现。

多列CSS列表

5 个答案:

原帖

附录：固定列数

附录：垂直滚动