砌體：有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格式的問題

回答

相關問題