CSS : 짝수 요소 정렬

Question

Here is my layout. divs 내부에 508px 크기의 컨테이너가 있습니다. 나는 왼쪽 열 (odd divs)을 왼쪽으로 정렬하고 오른쪽 열은 오른쪽으로 정렬하려고합니다. nth-child(even)을 시도했지만 오른쪽 여백을 조정하지 않았습니다. 하나 - 왜 작동하지 않습니까? 두 가지 - 거기에 더 우아한 해결책이 있습니까?

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> 

Answer 1

당신은 심지어 div의 잘 떠 만드는 시도? 이처럼

:

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

작동

Fiddle