image - 浏览器上的jQuery Masonry流体图像调整大小

Question

我正在尝试使用 Masonry 构建带有图像的流畅多列布局。在某些浏览器大小下，多列会翻转为一列。有没有办法来解决这个问题？

代码笔： http ://codepen.io/anon/pen/dloAe

$(function(){
  var $container = $('#container');
      
  $container.imagesLoaded( function(){
       $(window).resize(function(){
          $container.masonry({
            itemSelector: '.item',
            isResizable: false,
          });
       }).resize();
    });
});

img {
  max-width: 100%;
}

#container {
  max-width: 1280px;
  margin: 0 auto;
}

.item {
    float: left;
    width: 46%;
  padding: 2%;
}

<div id="container">
  <div class="item">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rho_Ophiuchi.jpg/611px-Rho_Ophiuchi.jpg">
  </div>
  <div class="item">
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/cb/Hess_maloyaroslavets.jpg">
  </div>
    <div class="item">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rho_Ophiuchi.jpg/611px-Rho_Ophiuchi.jpg">
  </div>
    <div class="item">
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/cb/Hess_maloyaroslavets.jpg">
  </div>
</div>

Answer 1

对我来说，它分为两列，一直到最小的 chrome 可以去。

但是，我建议为您的容器设置一个最小宽度（320 像素），以便任何小于该值的（我假设是当它进入一列时）将启动窗口滚动而不是将其推入一列。

什么浏览器遇到这种情况？发生此问题时的窗口大小是多少？问题中的更多信息=答案中的更多帮助。