Html 浮动左一对项目

我有一个无法更改的给定html：

<ul>
    <li class="item1">2 lines text</li>
    <li class="item2">3 lines text</li>
    <li class="item3">1 line text</li>
    <li class="item4">4 lines text </li>
    <li class="item5">4 lines text </li>
    <li class="item6">2 lines text</li>
</ul>

如果我只是将它们全部向左浮动，它就像一个表，第二行将垂直放置，以匹配第一行最长列的高度。我希望项目只是20像素的垂直rom与HTML我有彼此

到目前为止，我尝试的是浮动：左；奇数和清晰：左；偶数，但我得到的都是一列一列的

编辑：我需要IE8的支持+

我不想仅仅改变项目的顺序，我想避免浮动看起来是什么样子，我将用虚拟文本编辑问题。

请参阅

您可以通过使用

列计数

属性执行此操作

HTML

---

这是可以做到的，看看下面的链接 如果您添加一些

div

---

“/

恐怕css浮动无法做到这一点。你能做的最好的方法是绝对定位LI元素，使它们按照你想要的方式排列。LI必须设置宽度和高度才能实现这一点。是的，这是不可能的，因为LI的内容是来自数据库的文本：我认为你应该使用一些r像mithunsatheesh这样的ender模板我需要支持IE8+你能使用jQuery函数来重新排序HTML元素吗？@ElaineMarley:你的qn.没有任何东西需要IE支持。这使用CSS3。不幸的是没有IE支持…这是CSS3属性。@ElaineMarley如果你想要广泛的可比性，你必须使用jQuery o来处理DOMr任何其他技术。哦，我明白了……让我看看，然后再给你回复

 | Item 1  | Item 3 | Item 5 |
 | Item 1  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 6 |
                    | Item 6 |

<ul>
    <li class="item1">Item 1</li>
    <li class="item2">Item 2</li>
    <li class="item3">Item 3</li>
    <li class="item4">Item 4</li>
    <li class="item5">Item 5</li>
    <li class="item6">Item 6</li>
</ul>

ul {

    margin:0;padding:0;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

}