多列CSS列表 [英] Multi-column CSS lists

问题描述

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

Is there a way to do re-flowable, multi-column lists, where the list can have list items of varying heights, using only valid CSS? By re-flowable, I mean that as the user drags the window wider or narrower, the number of columns should automatically adjust when the list items are of fixed width.

I看到了关于 A List Apart 的文章，但他们的解决方案都不适合所有这些（貌似简单）的要求。乍一看，我认为多列列表的CCS3提议没有（因为它似乎你必须指定列数）。

I've seen the article on A List Apart, but none of their solutions fit all of those (seemingly simple) requirements. At first glance, I think the CCS3 proposal for multi-column lists does not either (because it appears you have to specify the number of columns).

如果它有帮助，我不是所有关注IE6和只关心IE7的种类。

If it helps, I am not at all concerned about IE6 and only kind of concerned about IE7. My target audience is early-adopter, web-savvy types.

更新：仔细观察CSS3规格，指定列宽应该做，但在现实中，我遇到了奇怪的溢出等。任何人使用此项IRL？

Update: Looking more closely at the CSS3 spec, specifying a column width should do it, but in reality, I'm running into weirdness with overflows and such. Anyone using this stuff IRL?

推荐答案

原始帖子

单一的命令为我做了窍门（虽然它在 -webkit - 和 -moz - 版本） / p>

Original post

In fact the single command does the trick for me (although it comes in -webkit- and -moz- versions):

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

以下是增加可读性的其他规则。将下面和上面的代码插入到List List中的示例（我可以粘贴整个HTML，如果有人清除版权）并享受：

Here are additional rules to improve readability. Insert the code below and above into an example from A List Apart article (I can paste the whole HTML if somebody clears copyright) and enjoy:

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。

Tested: Safari 4 (4528.17), Fx 3.5b4 /Mac.

注意在第一次遇到列宽属性时，我完全错过了它做再平衡。现在可以在 W3C 发现它，并通过 Surfin'Safari 。

Note that on the first encounter of column-width properties some time ago I completely missed the crucial fact that it does rebalancing. Discovered it now at W3C and confirmed with Surfin' Safari.

从我的理解中，列的宽度应该随着页面的宽度变化，所以命令更像

As I understand from the clarification, the width of columns should change with the widthof the page, so the commands are more like

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

附录：垂直滚动

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

Addendum: Vertical scrolling

Now you say that there should be a vertical scrollbar. Since there is no UI that would do separate scrollbars to the right of each column, I think you have in mind one scrollbar that would scroll the whole multicolumn list. That can be done by wrapping one more div with

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

这篇关于多列CSS列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！