砌體調整大小問題

Question

我們正在對移動設備做出響應。然而砌體是，當窗口大小將其移動到允許另一列感有點出問題，但列不填充

http://tbd.aaronnicholls.co.uk/work

有誰知道這

一個很好的修復

謝謝

Answer 1

不知道這是否會幫助你。這是我在我的網站上使用的和調整大小的工作，因爲它應該。也許如果你修改你的代碼，它也適用於你。

下面的函數似乎從您的代碼中丟失。 #container是包裝所有項目的容器。在你的情況下，它是工作循環ul。 .span1BoxWrapper是項目的主包裝器。問題似乎與您的主要工作循環包裝和寬度。我在螢火蟲中取出寬度，並將其物品正確地重新定位。下面的缺失功能應該解決這個問題。

注意：如果我將.js文件更改爲jquery.masonry.js（就像您所擁有的一樣），則佈局不再有效，因此可能也是您的問題的原因。另一個原因可能是在您調整屏幕大小時，這些框會縮小。

<!--boxes arrangement--> 
<script src="js/jquery-1.8.2.min.js"></script> 
<script src="js/jquery.masonry.min.js"></script> 
<script src="js/modernizr-transitions.js"></script> 
<script> 

    $(function(){ 

    $('#container').masonry({ 
     itemSelector: '.span1BoxWrapper', 
     //cornerStampSelector: '.corner-stamp', 
     columnWidth: 1, 
     isAnimated: !Modernizr.csstransitions, 
     //isRTL: true, 
     isFitWidth: true 
    }); 

    }); 
</script> 
<style> 
#container{ 
    background:#fff; 
    padding:10px 10px 0 0; 
    border:1px dotted #ccc; 
    margin:0 auto 20px; 
    overflow:hidden; 
    clear: both; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
</style>