我該如何解決這種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格作爲一個錶行。在這種情況下，6 gallery-item應顯示爲2行。

我的問題是使用gallery-item divs的保證金。我需要刪除每行第3格的右邊距，3格應該在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來解決父容器的寬度減小。

參考

您可以在學習更多有關nth-child選擇：
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo