html – 如何CSS两个列的列表项?

html – 如何CSS两个列的列表项?,第1张

概述我需要按照以下规则显示两列项目列表: >列的容器具有流体宽度 >两列的宽度需要相等 >项目被动态渲染,至少显示一个 >物品订单需要先向左下方流动,然后右侧 >物品需要在底部均匀排列,或者在奇数的情况下,额外的项目应该显示在左栏 这是一个例子: ~ Item 1 | ~ Item 6~ Item 2 | ~ Item 7~ Item 3 | ~ Item 8~ Item 4 | 我需要按照以下规则显示两列项目列表:

>列的容器具有流体宽度
>两列的宽度需要相等
>项目被动态渲染,至少显示一个
>物品订单需要先向左下方流动,然后右侧
>物品需要在底部均匀排列,或者在奇数的情况下,额外的项目应该显示在左栏

这是一个例子:

~ 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>
解决方法 有一篇关于 alistapart的有用的文章,请试着看看.

编辑后更新:

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

总结

以上是内存溢出为你收集整理的html – 如何CSS两个列的列表项?全部内容,希望文章能够帮你解决html – 如何CSS两个列的列表项?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1100693.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存