JQuery Isotope - Каков наилучший способ применения маржи к элементам?

Question

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

CSS

#container .elements{ 
    margin-bottom: 20px; 
    margin-left: 1%; 
    margin-right: 1%; 
    width: 23%; 
} 

JS

$container.isotope({ 
     itemSelector: '.elements', 
     layoutMode: 'fitRows' 
}); 

Есть нежелательные поля слева и справа от контейнера:

Как я могу решить эту проблему?

Answer 1

Вы можете сделать это с помощью контейнера с отрицательными полями для левой и правой

#container { 
margin-left: -1%; 
margin-right: -1%; 
} 

Answer 2

Один из способов сделать балансируют внутренний край с краем контейнера:

#container .elements{ 
margin-bottom: 20px; 
//margin-left: 1%; 
margin-right: 1%; 
width: 23%; 
} 

#container { 
    margin-left:1%; 
} 

Другим способом сделать свой собственный lastelement класс и применить его к последнему элементу в каждой строке:

#container .elements.lastelement { 
    margin-right:0; 
} 

Answer 3

Другим решением может быть удаление левого поля из первого элемента каждой строки.

Вы можете сделать это, используя nth-child selector.

Ваш код становится:

#container .elements { 
    margin-bottom: 20px; 
    margin-left: 2% 
    width: 24%; 
} 

#container .elements:nth-child(4n+1) { 
    margin-left: 0%; 
} 

Пожалуйста, обратите внимание, что я пересчитывается поля для того, чтобы держать вещи простыми.