1

そのため、すべてが左にフロートし、その間に等量のマージンがある div 3 の行がありますが、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;
}

何か案は？また、ユーザーがリストに画像をアップロードすると、これらの 3 つの画像だけに適用することはできません。

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-rule

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

したがって、:first-childor :last-child(または nth-child) 疑似クラスを使用して、最初の要素 (または 3 番目) からマージンを削除します。nth-child は、div を追加し続け、毎回 3 番目の画像からマージンを削除できるため、最良の選択ですが、十分にサポートされていないため、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 に答える