砌体：有div格式的问题

我使用砌体来实现不同宽度的布局。大多数人的身高相同，如果不是这样的话，他们的想法就是他们计算出正确排列在一起。砌体：有div格式的问题

您可以查看这里的小提琴： 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的粉红色方块向右？我一直在绞尽脑汁花费数小时试图弄清楚我做错了什么。

在此先感谢。

来源

2014-09-26 ritchieee

ÿ你需要有一个非零的columnWidth。发生什么事是Masonry正在寻找该变量并且正在0，正在使用它找到的第一个元素的宽度匹配itemSelector（您的masonry-4对象）。您需要设置它（将其设置为1对于您尝试使用不同宽度进行的操作是最好的）。

的jsfiddle：http://jsfiddle.net/hLangx3g/1/

来源

2014-09-26 21:02:46 Ford

嗨福特，这是整理它。非常感谢您的意见，我非常感谢。 – ritchieee 2014-09-26 21:31:55

如果我明白了，这就是你想要的，对吧？

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

我说：

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

CSS：.column{width:8.3333333333%;}

我改变：

JS：columnWidth: '.column'

来源

2014-09-26 20:59:47 OxyDesign

嗨OxyDesign，对不起，我刚刚注意到你的评论。这似乎也起作用，对我来说更有意义，因为那一列是8.333 rec。对？我是新来的Stackoverflow和两个答案回答我的问题，所以我该怎么办？哈哈！ – ritchieee 2014-09-26 21:33:14

是的，我添加了一个专栏（1/12，基于你设定的“网格”，所以8.33333％），并用它作为砌体参考，就像在砌体文档中推荐的一样http://masonry.desandro.com/ options.html＃列宽。而对于StackOverflow，我认为你只能选择一个答案。这取决于你 – OxyDesign 2014-09-26 21:40:36

谢谢OxyDesign，以及这也解决了我的问题，非常感谢您的帮助 – ritchieee 2014-09-26 21:44:36

砌体：有div格式的问题

回答

相关问题