CSS：對齊偶數元素

Here is my layout。我有一個容器508px寬的divs裏面。我想將左列（奇數格）對齊左邊，右邊列右對齊。我試過nth-child(even) - 但它不調整右邊距。一 - 爲什麼它不起作用？兩個 - 有沒有更優雅的解決方案呢？CSS：對齊偶數元素

CSS

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } 
.clearfix:after { clear: both; } 
.clearfix { zoom: 1; } 


#products {width:508px;background-color:#FFC;} 
#products > div { 
    float:left; 
    margin: 0 30px 30px 0; 
    text-align: center; 
} 
#products > div:nth-child(even) {margin: 0 0 30px 0;background-color:#CCC;} 
#products a {font-weight:normal;} 
#products img { 
    width:224px; 
    height:120px; 
}

HTML

<div id="products" class="clearfix"> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 1</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 2</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 3</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 4</a></div> 
     </div> 
     <div> 
      <div><a href=""><img src="" alt=""></a></div> 
      <div><a href="">Product 5</a></div> 
     </div>      
    </div>

來源

2013-06-21 tuco

你試過使得即使div的浮動權？

像這樣：

#products > div:nth-child(even) {margin: 0 0 30px 0;background-color:#CCC; float: right;}

Fiddle

來源

2013-06-21 16:34:19 LonelyWebCrawler

這一工程！任何想法爲什麼它忽略了我的新的0右邊距？ – tuco

它並沒有忽略它，但是偶數divs默認情況下不會被刷新到右側，因爲在HTML/CSS中，事情從左到右依次進行。 – LonelyWebCrawler

更正：在你的情況下，_all_ divs浮動到左邊，所以他們堅持到左邊，因爲邊緣會讓他們。 – LonelyWebCrawler

CSS：對齊偶數元素

回答

相關問題