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

Question

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

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

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

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

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

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

Любой способ заставить это работать?

Answer 1

С JQuery, удалить поля и используйте Masonry's gutterWidth option на свои места.

CSS:

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

JQuery:

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

Answer 2

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

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