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>标记中生成两列的好方法是

DEMO 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及更早版本）

DEMO http://jsfiddle.net/kevinPHPkevin/NChgL/3/

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

但您可以为每个<li>分配一个班级。左边一个，右边一个，效果与上面相同。

Answer 2

我花了一段时间才了解花车，但是最近的一个项目我真的掌握了它们。

如果您在小提琴中注意到，您的＃1和＃2会正确浮动。然后＃3 li将在下一个可用空间中浮动到左侧。不幸的是，浮点数不允许将元素（如＃3 li）放置在可用空间中。它不允许'回填'。你知道，你的＃2元素比＃1高，所以它会产生你所看到的那个小差距。你的＃3元素的下一个可用位置在你的第一个元素下面，但是这个空间在技术上被采用，所以它将它推下来。

您可以通过制作两个列表而不浮动任何列表来进行两列布局，只需将ul样式设置为正确的宽度。

或者你可以将所有其他div浮动到右边

Answer 3

您可以使用jquery正确对齐它们。

希望这可能会有所帮助 - http://masonry.desandro.com/

它也适用于IE。

浮动创建的垂直空间

3 个答案: