如何在多列列表中浮动li元素

Question

我有以下HTML：

<ul class="baseList">
    <li>
        <ul class="baseListColumn">
            <li>10.09</li>
            <li>My title is here</li>
            <li>Author</li>
        </ul>
    </li>
</ul>

使用以下css：

.baseList {
    border: 1px solid #F00;
}

.baseListColumn {
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count:3; 

    -moz-column-gap: 10px; 
    -webkit-column-gap: 10px;
    column-gap: 10px; 
}

我的问题是，这会使baseListColumn的每个li的内容居中，并为每列提供相同的宽度。我想使列适合它的内容，除了最后一个li元素（作者），并将最后一个li元素的内容浮动。

这是当前代码：http://jsfiddle.net/aLGRJ/1/

           10.09                   My title is here                 Author
     asdfasdfasdfasdf           My title is here abababa            Author

在小提琴中你甚至可以看到如果根li的宽度足够大而相等的列分割太小而不能包含某些内容会发生什么。

这就是我想要的：

10.09                My title is here                                      Author
asdfasdfasdfasdf     My title is here abababa                              Author

我无法保证所有列总是具有相同的长度，否则我会使用绝对定位，同时我不想为第一列预留太多不必要的空间。注意我计划将此用于列数多于3的列表。

这是表格更好的解决方案吗？无论如何我希望有人可以帮助我，如果有更好的解决方案，我总是乐于接受建议。

Answer 1

看起来桌子会是一个更好的解决方案，不是因为显示属性，而是因为你内容的性质（记住，组织内容仍然是HTML的责任）。

看看this page。

虽然大多数要点都很普遍，但我倾向于关注两件事：

1. 不要使用仿表（<p>，<div>等）
2. 表格应该是可过滤的＆amp;可排序（如果多于几行）

您可以自己生成所有CSS ...或者，使用您最喜欢的ECMAScript库来完成样式的简短工作。