Question

我有一些数据显示如下：

<data 1> | <data 2> | <data 3>
<data 4> | <data 5> | <data 6>

我想要的是：

<data 1> | <data 3> | <data 5>
<data 2> | <data 4> | <data 6>

最多约5行。

我目前正在使用<ul>，并且数据会被插入到<li>中。 <ul>的宽度为25％，允许同一行中有3个，我只想更改它们出现的顺序（它们当前按日期排序，升序）。

Answer 1

请使用以下代码：

<html>
<head>
<style>

ul{
display: inline-block;
list-style-type:none;
width:25%;
}

</style>
</head>
<body>
<ul><li>data1 |</li>
<li>data2 |</li></ul>

<ul><li>data3 |</li>
<li>data4|</li></ul>

<ul><li>data5 |</li>
<li>data6 |</li></ul>

</body>
</html>

Answer 2

您是否有理由无法将数据物理移动到您希望其显示的行？例如：

data1 |
data3 |
data5

data2 |
data4 |
data6

您不会在任何地方指出您的数据是动态的。如果是，那么也许你应该在构建无序列表（ul）之前构建一个数组，然后根据数组中的偶数和奇数索引进行显示。这可以使用javascript，php或许多其他语言来完成。你的代码库是什么？

Answer 3

可以使用此类任务CSS columns：

column-count: 3;

演示：http://jsfiddle.net/aw9vC/

浏览器支持：所有现代浏览器和IE10 +。对于IE，您应确保LI项具有display: inline-block或float: left，以允许优雅降级为默认顺序。

下一个元素是垂直而不是水平

3 个答案:

演示：http://jsfiddle.net/aw9vC/