Каменная кладка: Имею проблемы с маской div

Question

Я использую масонство для достижения макета с разной шириной. Большинство из них имеют одинаковую высоту, а если нет, то идея состоит в том, что они рассчитывают правильно выстраиваться рядом друг с другом.

Вы можете просмотреть скрипку здесь: http://jsfiddle.net/hLangx3g/

И вот мой код:

// Javascript 
 
var container = document.querySelector('#masonry-grid'); 
 
var msnry = new Masonry(container, { 
 
    // options 
 
    itemSelector: '.masonry', 
 
    columnWidth: 0 
 
});

#masonry-grid {width:80%; margin:0 auto;} 
 
.masonry {background:#069;} 
 
.masonry-3 {width:25%; padding-bottom:25%; background:#0C6} 
 
.masonry-4 {width:33.3%; padding-bottom:33.3%; background:#9C0} 
 
.masonry-6 {width:50%; padding-bottom:50%; background:#C36} 
 
.masonry-8 {width:66.6%; padding-bottom:33.3%; background:#FC9} 
 
.masonry-12 {width:100%; padding-bottom:33.3%; background:#036}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div id="masonry-grid"> 
 
    <div class="masonry masonry-4"></div> 
 
    <div class="masonry masonry-8"></div> 
 
    <div class="masonry masonry-3"></div> 
 
    <div class="masonry masonry-3"></div> 
 
    <div class="masonry masonry-6"></div> 
 
    <div class="masonry masonry-3"></div> 
 
    <div class="masonry masonry-3"></div> 
 
    <div class="masonry masonry-12"></div> 
 
    <div class="masonry masonry-12"></div> 
 
</div>

(код вставляется на переполнение стека, кажется, не правильно макет, мой jsfiddle где Я до сих пор).

Вы увидите четыре зеленых (не извести) квадратов одинаковой ширины и высоты. Я надеялся, что четыре коробки сами сядут на квадрат, поэтому по две на каждой линии с большой розовой коробкой сидят справа от четырех. Тогда все будет равномерно.

Как я могу получить четыре зеленых квадрата, чтобы сидеть 2x2 с розовым квадратом справа? Я часами ломаю мозги, пытаясь понять, что я делаю неправильно.

Заранее спасибо.

Answer 1

Y ou необходимо иметь ненулевой columnWidth. Что происходит, так это то, что Masonry ищет эту переменную и составляет 0, использует ширину первого найденного элемента, который соответствует itemSelector (ваш объект masonry-4). Вам нужно установить его (установка его на 1 - лучшее, что вы пытаетесь сделать с разной шириной).

JSFiddle: http://jsfiddle.net/hLangx3g/1/

Answer 2

Если я понял, это то, что вы хотите, не так ли?

http://jsfiddle.net/OxyDesign/4n73om6z/

Я добавил:

HTML: <div class="column"></div>

CSS: .column{width:8.3333333333%;}

Я изменил:

JS: columnWidth: '.column'