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浮动吗？

像这样：

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

Fiddle

CSS：对齐偶数元素

1 个答案: