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 |

如果我只是将它们全部漂浮在左边，它就像一个桌子，第二行将垂直放置，以匹配第一行最长列的高度。我希望这些项目与我拥有的HTML相距20 px。

到目前为止我尝试过的是漂浮：左;奇怪的，清楚的：左;偶数，但我得到的都是一列一个接一个地。

编辑：我需要支持IE8 +

我不想只是改变项目的顺序，我想避免浮动的样子，我会用虚拟文本编辑问题。

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;

}

Answer 2

可以做到，请看以下链接如果你添加一些div http://jsfiddle.net/kUd8Y“/

Float留下了一对物品

2 个答案:

HTML

CSS