Question

所以我有一行div 3 infact，它们都向左浮动并且之间有相等的余量，但是当它涉及第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;
}

有什么想法吗？用户也会将图像上传到列表中，因此无法将其应用于这三个图像...

Answer 1

我认为你需要像这样的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-rule

#wrapper .box.third {margin:0 0 20px 0;}

Answer 2

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

#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;
}

停止div行到包装器中的下一行

2 个答案: