1

所以我有一排 divs 3 事实上，它们都向左浮动并且在它们之间有相等的边距，但是当涉及到第三个或右边的一个时，如果我放了太多的边距，它会自然地迫使它下降到下一行。我希望它在包装纸内保持糊状，因此每个之间的空间相等...

#mainwrapper .box {
    width: 288px;
    height: 245px;
    border:0px solid #fff;
    margin-left: 0px;
    margin-right: 20px;
    margin-bottom: 20px;
    -moz-box-shadow: 0 0 5px #d9d9d9;
    -webkit-box-shadow: 0 0 5px #d9d9d9;
    box-shadow: 0 0 5px #d9d9d9;
    float: left;
    position: relative;
    overflow: hidden;
    cursor:pointer;
    border: 10px solid #fff;

}

#mainwrapper .box img {
    position: absolute;
    left: 0;
        -webkit-transition: all 500ms ease-out;
        -moz-transition: all 500ms ease-out;
        -o-transition: all 500ms ease-out;
        -ms-transition: all 500ms ease-out; 
    transition: all 500ms ease-out;

}

所以有图像和图像的包装器 - 它所在的包装器是：

#wrapper {
    width: 100%;
    max-width: 980px;
    margin: auto;
    margin-top: 0;
    margin-bottom: 60px;
}

有任何想法吗？此外，用户将图像上传到列表会增长，因此它不能仅应用于这三个图像......

4

2 回答 2

2

我认为你需要这样的css

#wrapper .box {
    width: 30%;
    margin:0 5% 20px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* your style here */
}
#wrapper .box:nth-child(3n) {margin:0 0 20px 0;}

IE8 看不懂 :nth-child，你需要添加一些 jquery

$('#wrapper .box:nth-child(3n)').addClass('third');

和分离的CSS规则

#wrapper .box.third {margin:0 0 20px 0;}
于 2013-08-27T21:15:05.057 回答
1

所以我会使用:first-childor :last-child（或 nth-child ）伪类来删除第一个元素（或第三个元素）的边距。nth-child 将是最好的选择，因为它允许您不断添加 div，每次都从第三张图像中删除边距，但它并没有得到很好的支持，所以我将向您展示一个使用 first-child 的示例。

#mainwrapper .box {
    width: 288px;
    height: 245px;
    border:0px solid #fff;
    margin-left: 20px;
    margin-right: 0px;
    margin-bottom: 20px;
    -moz-box-shadow: 0 0 5px #d9d9d9;
    -webkit-box-shadow: 0 0 5px #d9d9d9;
    box-shadow: 0 0 5px #d9d9d9;
    float: left;
    position: relative;
    overflow: hidden;
    cursor:pointer;
    border: 10px solid #fff;

}
#mainwrapper .box:first-child{
    margin-left: 0px;
}
于 2013-08-27T20:38:26.007 回答