Каменная кладка jQuery с процентной шириной

Есть ли способ получить jquery masonry, работающий с разделителями в процентах? Я пытаюсь создать макет жидкости с 25%, 50%, 75% и 100% шириной. Но как только я устанавливаю ширину с%, автоматическое изменение размера перестает работать, и если я попытаюсь вручную запустить mason onresize, я получаю ошибки округления, из-за чего divs прыгают. Также он становится довольно багги, что он иногда игнорирует высоту, а иногда просто останавливает размещение div и помещает их все на 0,0

Разметка HTML:

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

Свойства CSS:

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

Muchos gracias для любого ввода, J

Ответ 1

Забудьте о .wight, добавьте только это в css

    .box {
      width: 25%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

Ответ 2

У меня такая же проблема, попробуйте, попробуйте и попробуйте, и эта работа для меня.

.masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}

Ответ 3

У меня была такая же проблема... решил ее с опцией css calc. Это работает отлично, но не при изменении размеров окон, тогда он становится немного сумасшедшим...

@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}

Ответ 4

Если вы хотите 25% width not 24.9% добавить margin-left:-1px!important; в поле