Question

我想要一个多列列表：

不使用JS
窗口大小的回流
- 生成与适合封闭元素一样多的列
- 因此，不需要将列表批量处理为手动列组
适用于所有浏览器
适用于任意数量的未知宽度（但单行高）元素
- 使每列适合其（动态）内容的宽度
不会创建滚动条或其他溢出问题
在可能的情况下从上到下排序

我的代码目前是：

ul.multi, ol.multi {
 width: 100%;
 margin: 0;
 padding: 0;
 list-style: none;
 -moz-column-width: 12em;
 -webkit-column-width: 12em;
 column-width: 12em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
 column-gap: 1em;
}

ul.multi li, ol.multi li {
 <!--[if IE]>
  float: left; 
 <![endif]-->
  width: 20em;
  margin: 0;
  padding: 0;
}

虽然这可以好的，但它有一些问题：

我必须猜测内容宽度
它在IE中是从右到左（虽然这可以作为一种优雅的降级模式）
在非IE，非Moz / Webkit / CSS3浏览器中根本不起作用

如何改进？

Answer 1

我会避免将CSS3用于任何结构网站设计。我最好的猜测是尝试下面的东西，基本上只是删除CSS3的东西。如果我正确理解你，这里的大问题是不知道你的物品的宽度。固定宽度这样的东西应该是你所需要的，但对于你所描述的东西，你需要得到我们老朋友Javascript的帮助！：）

<style>
body, html
{
    margin: 0;
    padding: 0;
}
ul.multi
{
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.multi li
{
    float: left;
    width:10em;
    line-height: 1;
    margin: 0;
    padding: 0;
}
</style>

<ul class="multi">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
</ul>

Answer 2

不幸的是，如果没有一些js或后端魔法/黑客，我认为这是不可能的。这是一个有用的演示，提供了一些hackery：

http://www.communitymx.com/content/article.cfm?cid=27f87

但它显然不完美。

OR与JS：http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript

同样，你最好的选择是在服务器上做一些数学运算并将其调整好，或者，如果你愿意放弃IE，使用列宽或列数，但这取决于需要支持的内容。不幸的是，我们只是停留在80年代。：P

css：跨浏览器，回流，从上到下，多列列表

2 个答案: