html - float 离开一对元素

Question

我有一个给定的 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>

现在我需要它们看起来像这样:

 | 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 |

如果我只是将它们全部 float 到左侧，它就像一个表格，第二行将垂直放置以匹配第一行最长列的高度。我希望这些元素与我拥有的 HTML 彼此之间的垂直距离仅为 20 像素。

到目前为止，我尝试过的是 float:left;奇数和清晰:左；偶数，但我得到的只是一列中的所有这些。

编辑:我需要对 IE8+ 的支持

我不想只更改元素的顺序，我想避免 float 的样子，我将使用虚拟文本编辑问题。

Answer 1

参见 this fiddle .

您可以通过使用 column-count 属性来实现。

HTML

<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>

CSS

ul {

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

}