Кладка: убрать желоб с последней колонки

Я работал с новой версией Masonry, которая, кажется, работает намного более плавно, особенно для гибкой / отзывчивой сборки, которую я делаю.

Однако я столкнулся с одной проблемой - я не уверен, как удалить желоб в правом крайнем углу контейнера .masonry, чтобы элементы были на одном уровне с краем.

Вот пример кода: http://codepen.io/iamkeir/pen/xlcBj

Я мог бы потенциально установить ширину и overflow:hidden, чтобы обрезать последний пробел, но не идеально.

Точно так же я попытался добавить padding-left: 1%, но это изменило ширину контейнера, поэтому проценты больше не точны.

Приветствуются любые идеи / советы!


responsive-design fluid jquery-isotope gutter jquery-masonry
person iamkeir    schedule 30.07.2013    source источник
comment
Коллега предложил обернуть .masonry в контейнер, а затем добавить отрицательное поле-right на .masonry, равное ширине желоба. Это работает, но я бы предпочел исправить это, чем взломать ... :)   -  person iamkeir    schedule 30.07.2013

Ответы (3)


arrow_upward
13
arrow_downward

@desandro любезно написал о решении - проблема была в моих расчетах%, которые должны были быть:

(container width - (columns * column width)) / number of gutters = gutter width

Итак, в моем примере: (100% - (4 * 24%)) / 3) = 1.33333333333333%

http://codepen.io/desandro/pen/ybluC

person iamkeir    schedule 30.07.2013
comment
В этом есть смысл, просто жаль, что я сам об этом не подумал :( - person johna; 04.09.2015

arrow_upward
1
arrow_downward

Я смог сделать это с помощью calc (). Используя 0 полей, 0 отступов, 20 пикселей и сетку 1200 пикселей, вот дизайн для 1, 2, 3 и 4 столбцов, которые расположены на одном уровне слева и справа. Calc -10px будет переноситься, поэтому мне пришлось использовать -11px в моих вычислениях:

        #grid .item {
            float: left;
            padding: 0;
            width: 100%;
            margin: 0;
        }

        @media only screen and (min-width: 500px) {
            #grid .item {
                width: calc(50% - 11px);
            }
        }

        @media only screen and (min-width: 800px) {
            #grid .item {
                width: calc(33% - 11px);
            }
        }

        @media only screen and (min-width: 1200px) {
            #grid .item {
                width: 285px;
            }
        }
person jordan314    schedule 19.02.2016

arrow_upward
0
arrow_downward

Вы можете попробовать wookmark или packery, чтобы удалить правый желоб.

person Gigamegs    schedule 30.07.2013
comment
Спасибо за ваш вклад - desandro (разработчик Masonry) действительно понял, что это проблема с моими вычислениями%. - person iamkeir; 30.07.2013