CSS:对齐偶数元素

Question

Here is my layout .我有一个 508px 宽的容器，里面有 div。我想将左列(奇数 div)向左对齐，将右列向右对齐。我尝试了 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 正确 float 吗？

像这样:

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

Fiddle