Question

我希望有人可以向我解释并提供解决方案..

我创造了一个小提琴来演示这个问题并解释问题

这是问题..

当<li>或<div>等元素向左浮动并且它们被设置为特定宽度但时，它们不会/不能具有固定高度< / strong> ,,,我怎样才能确保分成新行的元素与下一行的开头对齐？

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

这也是小提琴代码：

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：

 <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/

Answer 2

使用display: inline-block; - 最不被重视的显示类型IMO。

你不能做的主要是100％宽度覆盖，但由于你的例子不要求项目相互对接，它是内联块的完美用例

诀窍是确保所有宽度和边距加起来大约为99％而不是100％。

http://jsfiddle.net/ryanwheale/s6ow1oq3/3/

#one li, #two li {
    display: inline-block;
    vertical-align: top;
    width:    22%;
    margin:   1.2%;
    padding:  7px;
    border:1px solid #DDD;
}

CSS - 浮动元素失去对齐

2 个答案: