CSS：对齐偶数元素

。我有一个508px宽的容器，里面有div。我要将左列（奇数div）向左对齐，将右列向右对齐。我尝试了第n个孩子（偶数）——但它没有调整正确的边距。第一，为什么它不起作用？第二，有没有更优雅的解决方案

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>

---

您是否尝试过使偶数div正确浮动

像这样：

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

---

这很有效！你知道为什么它会忽略我新的0右边距吗？它不会忽略它，但是偶数div在默认情况下不会被刷新到右边，因为在HTML/CSS中，事情是从左到右的。更正：在你的例子中，所有div都是浮动到左边的，所以它们会尽可能地贴到左边。