2

我有以下 HTML 标记。连续有两个 .item div,每个 div 具有不同的高度。

是否可以在不更改标记的情况下每隔 div 清除一次浮点数?每隔一个 div 就有一个 .last-item 类。

HTML:

<div class="wrap">
    <div class="item"></div>
     <div class="item last-item"></div>
     <div class="item"></div>
     <div class="item last-item"></div>
</div>

CSS:

.wrap{
    border: 1px solid #000;
    width: 200px;
    overflow: hidden;
}

.item{
    width: 50%;
    background: yellow;
    margin-bottom: 10px;
    float: left;
}

演示:http: //jsfiddle.net/R7VHX/

4

2 回答 2

11
.item:nth-child(2n+1) { clear: both; }

这相当于:

.item:nth-child(odd) { clear: both; }

每第二个项目(换句话说,每三个)清除一次。

更多信息请访问http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

于 2013-10-13T13:50:02.103 回答
0

您可以使用nth-child(odd)选择器:

.item:nth-child(odd){
    clear: both;
}
于 2013-10-13T13:50:22.767 回答