jQuery Масонство и margin-right

Question

У меня есть два столбца в строке, первый столбец имеет правый край, а второй столбец не имеет. Я хочу использовать jQuery 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', 
}); 

Demo: http://jsfiddle.net/Y7USd/

Answer 1

JQuery масонство имеет опцию под названием gutterWidth. Вы должны использовать это для создания дополнительного поля/желоба между элементами.

В вашей скрипке вы также пропустили, чтобы включить modernizr-transitions.js.

Настоящий рабочий документ: http://jsfiddle.net/shodaburp/T3FLr/