浏览器上的jQuery砌体液体图像调整了大小

Question

我正在尝试使用砌体的图像构建流体多列布局。在某些浏览器上，将多列翻转到一列中。有办法解决此问题吗？

codepen：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

它为我留在两列中，直到最小的镀铬可以进行。

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

什么浏览器正在遇到什么？发生此问题时的窗口是多少？问题中的更多信息=答案中有更多帮助。