如何CSS列出两列项目列表？

Question

我需要根据以下规则显示两列项目列表:

• 柱的容器具有流体宽度
• 两列的宽度必须相等
• 项目是动态呈现的,至少会显示一个
• 物品订购需要先向下流动,然后向右流动
• 项目需要在底部均匀排列,或者在奇数的情况下,额外项目应显示在左列中

这是一个例子:

~ Item 1   | ~ Item 6
~ Item 2   | ~ Item 7
~ Item 3   | ~ Item 8
~ Item 4   | ~ Item 9
~ Item 5   |

只要能解决这个问题,HTML就可以是任何东西.我只能使用XSLT将HTML包装在服务器吐出的内容之外.我可以访问两个XSLT参数:一个告诉我当前的项目编号,另一个告诉我有多少项目.

我的CSS技能基本/中级,我不知道从哪里开始.关于这是否可以实现以及如何实现的任何想法？

更新:

谢谢你的回答.共识似乎是使用A List Apart文章或我更喜欢的表格,因为它更简单.该表的问题是服务器按排序顺序给我项目.使用表意味着要重新排序XSLT技巧,不是吗？

<tr>
    <td>Item 1</td>
    <td>Item 4</td>
</tr>
<tr>
    <td>Item 2</td>
    <td>Item 5</td>
</tr>
<tr>
    <td>Item 3</td>
    <td>&nbsp;</td>
</tr>

Answer 1

你只需要CSS,例如ul {column-count:2; -webkit-column-count:2; -moz-column-count:2}

Answer 2

有一篇关于alistapart的有用文章,请试试看看那里.

编辑后更新:

由于您处于可以访问的所有项目数量和当前项目,我认为两列表可能是您最好的选择.

Answer 3

CSS 无法做到这一点。您需要在服务器上收集列表并将项目分布在两个表列中（您可以使用 CSS 使两列宽度相同）。

注意：有用于多列布局的浏览器扩展，但它们不可移植。

[编辑]我知道alistapart上的文章，但我看不出我的解决方案有什么不同：建议的多列布局为每个项目提供了固定位置（通过为每个项目提供唯一的CSS ID，然后以某种方式定位它） 。这意味着您需要生成 HTML 并对服务器上的项目进行排序，然后使用大量技巧来定位它们。

使用具有两列的表格并在渲染期间将项目放入其中要简单得多。