Я пытаюсь настроить макет кладки jquery и иметь некоторые проблемы с макетом. Я пробовал несколько разных способов, но я не могу заставить свои ящики сидеть правильно.Проблемы с раскладкой кладки jquery
Это сайт я работаю над:
http://bluefish.website.2014.360southclients.com/
мне нужны коробки, чтобы сидеть, как это (но я не могу понять это):
-------- -- --
| | | | | |
| | -- --
| | --------
| | | |
-------- | |
-- -- | |
| | | | | |
-- -- --------
-------- -- --
| | | | | |
| | -- --
| | -- --
| | | | | |
-------- -- --
Это HTML:
<div class="grid-wrap">
<div class="block-wrap large">
<div class="block image light-blue white"> xxx </div>
</div>
<div class="block-wrap small">
<div class="block text-only purple white"> text here </div>
</div>
<div class="block-wrap small">
<div class="block text-only aqua white"> text here </div>
</div>
<div class="block-wrap large">
<div class="block image med-blue white"> xxx </div>
</div>
<div class="block-wrap small">
<div class="block text-only light-aqua white"> text here </div>
</div>
<div class="block-wrap small">
<div class="block text-only blue white"> text xhere </div>
</div>
<div class="block-wrap large">
<div class="block image med-blue white"> xxx </div>
</div>
<div class="block-wrap small">
<div class="block text-only dark-blue white"> text here </div>
</div>
<div class="block-wrap small">
<div class="block text-only light-blue white"> text here </div>
</div>
<div class="block-wrap small">
<div class="block text-only light-aqua white"> text here </div>
</div>
<div class="block-wrap small">
<div class="block text-only"> text here </div>
</div>
</div>
Это CSS:
.block-wrap{float:left;padding:0;margin:0 0 20px 0;overflow:hidden}
.block-wrap.small{width:289px;height:289px}
.block-wrap.large{width:598px;height:598px}
.block-wrap .block{width:100%;height:100%}
Это JQuery:
$(document).ready(function(e) {
var $container = $('.grid-wrap');
$container.masonry({
itemSelector:'.block-wrap',
gutter:20
});
});
Любая помощь будет высоко оценена !!
Пробовал, что он не работает , Он по-прежнему хранит маленькие ящики, где они есть, он не будет перемещать большую коробку в промежуток, как я пытался вытянуть. – SoulieBaby
Я также изменил атрибут data на классы – SoulieBaby