2

我试图更好地理解花车。我不明白这个问题。我曾在少数情况下发生过这种情况，但这是我最近的一次。我正在制作一个两列的无序列表，但在垂直间距方面存在一些问题。

<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 努力。

4

3 回答 3

5

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

我前段时间发现了这一点，从那以后一直在使用它。

已编辑

另一种解决方案是一个<li>左浮动，一个右浮动，依此类推（但不支持 IE8 及更早版本）

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

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

但是您可以为每个<li>. 一左一右，效果同上。

于 2013-05-29T18:17:56.303 回答
2

我也花了一些时间来理解花车，但是通过最近的一个项目，我真的掌握了它们。

如果你注意到你的小提琴，你的 #1 和 #2 是正确浮动的。#3 li 然后在下一个可用空间中向左浮动。不幸的是，浮动不允许将元素（如#3 li）放置在该可用空间中。它不允许“回填”。你看，你的#2 元素比你的#1 高，所以它会产生你看到的那个小间隙。#3 元素的下一个可用位置位于第一个元素下方，但从技术上讲，该空间已被占用，因此将其向下推。

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

或者您可以将所有其他 div 浮动到右侧

于 2013-05-29T18:19:20.820 回答
0

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

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

它也适用于 IE。

于 2013-06-02T10:16:03.593 回答