如何CSS的两列项目列表？ [英] How to CSS a two column list of items?

问题描述

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

• 列的容器具有流体宽度
• 
  


• 动态呈现项目，并且至少显示一个


• 项目排序必须先按左栏向右移动，然后向右移动。


• 项目需要在底部均匀排列，或在奇数的情况下，额外项目应显示在左侧列

以下是一个示例：

 〜Item 1 | 〜Item 6 
〜Item 2 | 〜项目7 
〜项目3 | 〜Item 8 
〜Item 4 | 〜Item 9 
〜Item 5 | 
  

HTML可以是任何东西，只要它解决了这个问题。我被限制在使用XSLT来包装服务器吐出的HTML。我可以访问两个XSLT参数：一个告诉我当前项目编号，一个告诉我有多少项目。

我的CSS技能是基本/中间和我不知道从这里开始。

更新：

感谢您的答案。协商一致似乎是使用 A List Apart 文章或我希望的表格它更简单。该表的问题是服务器按排序顺序给我项目。要使用表格，意味着XSLT会重新排序，不是吗？

 < tr& 
< td>项目1< / td> 
< td>项目4< / td> 
< / tr> 
< tr> 
< td>项目2< / td> 
< td>项目5< / td> 
< / tr> 
< tr> 
< td>项目3< / td> 
< td>& nbsp;< / td> 
< / tr> 
   
 
解决方案
  alistapart ，请尝试看看那里。
 
 
 
编辑后更新：
 
 
 
由于您处于可以访问的所有项目数量和当前项目的情况，我认为一个两列表格可能是你最好的选择。
 
I need to display a two column list of items according to the following rules:


Container for the columns has fluid width
Width of both columns needs to be equal
Items are dynamically rendered and at least one will be displayed
Item ordering needs to flow down the left column first, then the right
Items need to line up evenly across the bottom or in the case of an odd number the extra item should show in the left column


Here is an example:
~ Item 1   | ~ Item 6
~ Item 2   | ~ Item 7
~ Item 3   | ~ Item 8
~ Item 4   | ~ Item 9
~ Item 5   |
The HTML can be anything as long as it solves this problem. I'm restricted to using XSLT to wrap HTML around what the server spits out. I have access to two XSLT parameters: one that tells me the current item number and one that tells me how many items there are.

My CSS skills are basic/intermediate and I don't know where to start here. Any ideas on whether this is achievable and how to do it?

Update:

Thanks for the answers. Consensus seems to be either use the A List Apart article or a table which I'd prefer as it's simpler. The problem with the table is that the server gives me the items in sorted order. To use a table would mean XSLT trickery to re-sort, wouldn't it?
<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>

解决方案
There's a useful article on alistapart about exactly that, try taking a look there.

Update after edit:

Since you're in a situation where all you've got access to is the number of items and the current item, I think a two-column table might be your best bet.

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