2

我有一个无法更改的给定 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 像素。

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

编辑：我需要支持 IE8+

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

4

2 回答 2

1

看到这个小提琴。

您可以通过使用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;

}
于 2013-03-12T11:28:31.287 回答
0

可以的，加几条看下面的链接div http://jsfiddle.net/kUd8Y"/

于 2013-03-12T11:33:47.173 回答