0

行に2つの列があり、最初の列には右マージンがあり、2番目の列にはマージンがありません。jQuery Masonryを使用して、空のスペースを削除したいと思います。ただし、マージンの権利は石積みでは機能しないようです。

同じボックス幅を維持し、行の2番目のボックスの後のマージンを削除するにはどうすればよいですか？

HTMLは次のとおりです。

<div class="list">

    <div class="item"></div>
    <div class="item no-margin"></div>

    <div class="item"></div>
    <div class="item no-margin"></div>

    <div class="item"></div>
    <div class="item no-margin"></div>
</div>

CSS：

.list{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
}

.item{
    width: 150px;
    height: 150px;
    background: green;
    margin-right: 50px;  
    margin-bottom: 50px;
    float: left;
}

.no-margin{
    margin-right: 0 !important;

}

jQuery：

jQuery('.list').masonry({
        itemSelector: '.item',
});

デモ： http： //jsfiddle.net/Y7USd/

4

1 に答える 1

3

jQuery Masonryには、と呼ばれるオプションがありますgutterWidth。これを使用して、要素間に余分なマージン/ガターを作成する必要があります。

あなたのフィドルでは、あなたはまた、を含めることを逃しましたmodernizr-transitions.js。

実例は次のとおりです：http：//jsfiddle.net/shodaburp/T3FLr/

于 2013-03-08T03:11:24.160 に答える