Проблема с пометкой на основе кирпичной кладки

Я активировал масонство на родительском элементе (неупорядоченный список), в котором представлены измененные элементы списка, перечисленные ниже (с инструментами F12 DEV от Chrome, показывающими нижний край и margin-right в розово- МОГ цвет):Проблема с пометкой на основе кирпичной кладки

Masonry Problem before Resizing

Когда документ загружен, указанное место, несмотря на CSS каждого элемента списка были следующими;

li { 
    background-color: #fff; 
    border: 1px solid #dfdfdf; 
    float: left; 
    padding: 20px; 
    position: relative; 
    width: calc(50% - 10px); 
    margin-right: 10px; 
    margin-bottom: 10px; 
}

jQuery Я использовал следующее:

$(document).ready(function(){ 
    $("ul").masonry({ 
     itemSelector: 'li' 
    }); 
});

После того, как окно изменяется в горизонтальном направлении, стили CSS вступают в силу, как показано ниже;

Masonry Problem Solved by Resizing

Любая идея о том, как я могу получения идеальной выше на странице загрузки?

UPDATE *

JSFiddle: Click here. Если указанная проблема не появляется, попробуйте нажать кнопку «Запустить» (Ctrl + Return).

источник

2015-01-15 Ravindu Liyanapathirana

Вы можете воссоздать это в скрипке? – jmore009

Как вы оцениваете свои элементы? фиксированный или%? - немой вопрос;) –

@j_s_stack ul имеет размер 100% от родительского (body), а li (50% - 10px) –

Это работает finde as sone, как я добавляю gutter: 10;

$("ul#news").masonry({ 
    itemSelector: 'li', 
    gutter: 10 
});

Explenation: http://masonry.desandro.com/options.html#gutter

источник

2015-01-15 04:53:23

Это не работает для меня ... Любая идея, почему это может быть? –

Если у вас есть вид на Item # 3 в DEV Tools Что он говорит/показывает –

похоже, что ist зависит от вашего браузера, который вы используете –

Для задачи WebKit браузера я просто добавил $(window).load(function(){ перед тем ('#masonry').masonry({. Теперь маржа-снизу отлично подходит для каждого элемента в каждом браузере.

источник

2015-09-27 21:53:54 truemiro

У меня была та же проблема до сих пор.

Я полностью удалил все поля и позволил каменной кладке обрабатывать его («водосточный желоб»), и он отлично работает!

Надеюсь, что это поможет!

источник

2016-07-16 14:07:05

Проблема с пометкой на основе кирпичной кладки

ответ

Смежные вопросы