砌体：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> 

（插入Stack Overflow的代码似乎布局不正确，到目前为止我的jsfiddle就在这里）。

您会看到有四个宽度和高度相同的绿色（不是石灰）正方形。 我希望这四个盒子可以自己坐成一个正方形，所以每行两个，而粉红色的大盒子坐在四个盒子的右边。 这样一来，所有人都将平等。

我怎样才能使四个绿色方块坐在2x2的右边，而粉红色方块呢？ 我花了好几个小时试图弄清楚我在做什么错。

提前致谢。

Answer 1

您需要有一个非零的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'