0

这是我的布局。我有一个 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>
4

1 回答 1

2

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

像这样：

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

小提琴

于 2013-06-21T16:34:19.687 回答