1

組積造を使用して、画像を使用して流動的な複数列のレイアウトを作成しようとしています。一部のブラウザサイズでは、複数列が1列に反転します。これを修正する方法はありますか？

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>

4

1 に答える 1

0

私にとっては、最小のクロムに至るまで、2つの列にとどまりました。

ただし、コンテナーの最小幅 (320px) を設定することをお勧めします。これよりも小さい場合 (1 列に移動する場合と想定)、1 列に押し込むのではなく、ウィンドウのスクロールを開始します。

これが発生しているブラウザは何ですか? この問題が発生したときのウィンドウのサイズは? 質問の情報が増える = 回答のヘルプが増えます。

于 2013-02-27T01:20:57.093 に答える