浮动创建的垂直空间

Question

我想更好地了解浮子.我不明白这个问题.我曾经在少数情况下发生这种情况,但这是我最近的情况.我正在制作一个双列无序列表但是在垂直间距方面存在一些问题.

<ul>
<li width="50%"> a bunch of text</li>
<li width="50%"> a very large amount of text</li>
<li width="50%"> a small amount of text that does not line up with the first li</li>
</ul>

请参阅代码段以获得正确的演示.

.lists ul{
    width:500px;
}
li{
    width: 40%;
    float:left;
    padding-left:5%;
    padding-right: 5%;
}

<div class="lists">
    <ul>
        <li> <a href="#">harpoons sticking in near his starb</a></li>
         <li><a href="#"> aaalewent milling and milling round so, that my boat's crew could only trim dish, by sitting all thing and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all thei, with a milky-white head and </a></li>
    <li><a href="#"> five whales, and my boat fastened to one of them; a regular circus horse he was, too, that r sterns on the outer gunwale. </a></li>
         <li><a href="#"> harpoons sticking in near his starb went milling and milling round so, that my boat's crew could only trim dish, by sitting all thei </a></li>
         <li><a href="#"> m the bottom went milling and milling round so, that my boat's crew could only trim dish, by sitting all theiwent milling and milling round so, that my boat's crew could only trim dish, by sitting all theiof </a></li>
         <li><a href="#"> harpoons sticking in near his starb </a></li>
    </ul>
</div>

我想删除第一列中第一个和第二个项目之间的垂直间隙,但我不明白为什么它存在.

我需要支持IE 8并为IE7付出努力.

Answer 1

在一个<ul>标签中生成两列的好方法是这样

演示http://jsfiddle.net/kevinPHPkevin/NChgL/1/

div#multiColumn {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

我不久前发现了这个,并且从那时起就一直在使用它.

EDITED

另一个解决方案是<li>向左浮动一个,向右浮动另一个等等(但不支持IE8及更早版本)

演示http://jsfiddle.net/kevinPHPkevin/NChgL/3/

li:nth-child(odd) {
    float: right;
}
li:nth-child(even) {
    float: left;
}

但是你可以给每个人分配一个班级<li>.一个用于左边,一个用于右边,它将具有与上面相同的效果.