jQuery Masonry 和 margin-right答案

【问题标题】：jQuery Masonry and margin-rightjQuery Masonry 和 margin-right
【发布时间】：2014-05-14 17:15:10
【问题描述】：

我连续有两列，第一列有边距，而第二列没有。我想使用 jQuery Masonry 来删除空格。但是，margin right 似乎不适用于 Masonry。

如何保持相同的框宽度并删除行中第二个框后的边距？

这是 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/

【问题讨论】：

标签： jquery html css jquery-masonry

【解决方案1】：

jQuery Masonry 有一个名为gutterWidth 的选项。您应该使用它在元素之间创建额外的边距/装订线。

在你的小提琴中，你也错过了包含modernizr-transitions.js。

这是一个工作示例：http://jsfiddle.net/shodaburp/T3FLr/

【讨论】：