html - CSS - float 元素失去对齐

Question

我希望有人能向我解释一下并提供解决方案..

我创建了一个 fiddle 来演示这个问题并解释这个问题

http://jsfiddle.net/s6ow1oq3/

这里是问题..

当元素如<li>或 <div>向左浮动并且它们被设置为特定宽度但它们没有/不能有固定高度,,, 我如何确保进入新行的元素与开头对齐下一行？

在 fiddle 示例中，第二个示例演示了问题，而第一个示例是需要的。

这也是 fiddle 代码:

CSS:

li {
    list-style:    none;
}

#one li, #two li {
    width:    22%;
    float:    left;
    margin:   7px;
    padding:  7px;
    border:1px solid #DDD;
}

.clearfix {
    clear:    both;
    float:    none;
}

HTML:

<!-- Unordered List Examples -->

<div id="one">
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
</ul>
<div class="clearfix">
</div>

<hr/>

<div id="two">
<ul>
    <li>a</li>
    <li>b</li>
    <li>c1<br/>c2<br/>c3<br/>c4</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
</ul>
<div class="clearfix">
</div>

Answer 1

假设它总是 4 列，您可以使用 li:nth-child(4n + 1) 清除每一行的第一个元素。例如:

li:nth-child(4n + 1) {
    clear: both;
}

jsFiddle:http://jsfiddle.net/s6ow1oq3/2/