0

我有一些这样的HTML，

<div class="gallery">
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>  
    <div class="gallery-item">
        // my stuff...
    </div>
</div>

我需要使用这个 HTML 做的是，在gallery其中应该显示 3 个gallery-itemdiv 作为表格行。在这种情况下，6gallery-item应该显示为 2 行。

gallery-item我的问题是在为div使用边距时。我需要删除每行中第 3 个 div 的右边距，并且 3 div 应该在gallery.

这是我的 CSS

.gallery {
    width: 560; 
    background: red;
}

.gallery-item {
    background: gray;
    width: 172px;
    height: 200px;
    display: inline-block;
    margin: 0 10px 10px 0;
}

JS fiddle以便更好地理解。

希望有人能帮助我。谢谢你。

4

1 回答 1

2

我认为以下可能有效：

.gallery {
    width: 544px; 
    background: red;
}

.gallery-item {
    background: gray;
    width: 172px;
    height: 200px;
    display: inline-block;
    margin: 0 10px 10px 0;
}
.gallery-item:nth-child(3n+3) {
    background: yellow;
    margin-right: 0;
}

见小提琴：http: //jsfiddle.net/audetwebdesign/s3x38/

我使用nth-child选择器每 3 个选择一次.gallery-item，并应用 CSS 规则将右边距设置为 0。

我还调整了 with of.gallery以解决父容器宽度减小的问题。

参考

您可以在以下位置了解有关nth-child选择器的更多信息：http:
//www.w3.org/TR/css3-selectors/#nth-child-pseudo

于 2013-08-04T02:38:49.257 回答