砌体调整大小问题

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>