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>

砌体调整问题

1 个答案: