jquery masonry: nth-child () не будет работать?

Question

Эй, ребята, я пытаюсь использовать удивительный плагин кладки JQuery -> http://desandro.com/resources/jquery-masonry/

Плагин работает просто отлично, однако у меня возникают проблемы при создании макета, в котором я использую селектор nth-child (), чтобы избавиться от права на поле для каждого третьего элемента.

#footerwidgets li.widget {
    margin: 0px 24px 24px 0px;
    width:340px;
}

#footerwidgets li.widget:nth-child(3n) {
  margin-right:0px;
}

Так как мой контейнер для этих виджетов имеет ширину 1068 пикселей, три виджета отлично вписываются (поскольку последний виджет не имеет правого поля)

Когда я пытаюсь использовать плагин jquery masonry, это поведение игнорируется! Подходят только два столбца. (Плагин работает, поэтому все виджеты перемещаются в стиле каменной кладки). Когда я проверяю элементы, каждый третий элемент также имеет правое поле 24px. Таким образом, nth-child игнорируется.

Есть ли способ заставить это работать?

Answer 1

С помощью jQuery удалите поля и используйте вместо него параметр масонства ширины .

CSS:

#footerwidgets li.widget.masonry-brick { margin: 0; }

jQuery:

$('#footerwidgets').masonry({
  gutterWidth: 24
});

Answer 2

Масонство плохо работает с полями переменного размера. У вас есть три столбца и контейнер 528 пикселей. Лучше всего использовать три столбца по 176 пикселей. Каждый столбец будет иметь, скажем, 12px и ширину 152px.

Если вы хотите, чтобы общая ширина за вычетом левого и правого полей составляла 528 пикселей, увеличьте контейнер до 544 пикселей (528 пикселей + 2 x 12 пикселей) и ширину столбцов до 160.