0

我有以下 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 列的列表。

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

4

1 回答 1

0

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

看看这个页面。

虽然大多数观点通常是同意的，但我倾向于关注两件事：

  1. 不要使用假表（<p>,<div>等）
  2. 表格应该是可过滤和可排序的（如果多于几行）

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

于 2013-07-21T13:02:31.877 回答