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

请参阅小提琴：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

我该如何解决这种CSS边际问题？

1 个答案: