jQuery каменное крепление фторопластового футляра

Question

Для жизни меня не могу понять, как удалить широкие желоба и установить 0 при использовании жидкостного/процентного макета.

Я пробовал установить gutterWidth: 0, а поле и отступ до 0%, но он все еще не работает.

Вот код с сайта масонства.

$('#container').masonry({ 
    itemSelector: '.box', 
    gutterWidth:0, 
// set columnWidth a fraction of the container width 
    columnWidth: function (containerWidth) { 
     return containerWidth/5; 
    } 
}); 

CSS

.box { 
    width:33%; 
    margin:0%; 
    padding:0% 
} 
.box img { 
    width:100%; 
    height:auto 
} 

Что я должен настроить?

Answer 1

Посмотрите чуть ближе на то, что код кладки делает:

При установке ширины столбца функция возвращает математический результат, который принимает ширину контейнера и делит его на 5. Однако в вашем CSS ваш ящик width является третьей родительской. Таким образом, кладка пытается поместить 3-й ширины в столбцы 5-й ширины.

Это, скорее всего, ваша проблема здесь, однако кладка и жидкие макеты могут быть сложнее, так что не может быть все ...

Answer 2

У меня была аналогичная проблема с использованием Кладка с компоновкой процентной основе. Для меня это оказалось проблемой с полосой прокрутки браузера. Ширина рассчитывалась без полосы прокрутки. После того, как масонство побежало, измерения были слегка отброшены, потому что появилась полоса прокрутки. Я был в состоянии решить эту проблему, добавив следующий CSS:

body { overflow-y:scroll; } 

Это заставляет скроллбар, даже если он не нужен, что делает вычисление точным и фиксирует желоба.

Надеюсь, это поможет кому-то еще.