html - 我该如何解决这种 CSS 边距问题？

Question

我有一些这样的 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-item div 作为表格行。在这种情况下，6 gallery-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为了更好地理解。

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

Answer 1

我认为以下方法可能有效:

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

参见 fiddle :http://jsfiddle.net/audetwebdesign/s3x38/

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

我还调整了 .gallery 的 with 以说明父容器的宽度减小。

引用

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