0

この例 ( http://jsfiddle.net/cpSbH/2/ ) を参照し、ウィンドウのサイズを変更して、私が何を意味するかを確認してください。マージンを調整して、1 行にできるだけ多くのアイテムを表示するだけでなく、スペースを空け、片側（または中央に配置する場合は両方）の隙間を避けます。

JavaScriptなしでこれを達成することは可能ですか?

ありがとう

私が書いたコード：

HTML:

<div id="wrapper">
 <div class="item">item</div>
 ...
 <div class="item">item</div>
</div>

JS:

$(window).resize(function(){
  var minMargin = 10;
  var width = $("#wrapper").innerWidth();
  var itemWidth = $('.item').outerWidth()+minMargin+minMargin

  var count = Math.floor(width/itemWidth)
  var space = width - (count*itemWidth);
  var margin = (space/(count));

  if(margin < minMargin) margin = minMargin;

  margin = Math.floor(margin/2);
  $('.item').css({'margin-left':margin,'margin-right':margin}); 
});
4

1 に答える 1

0

フレックスボックス モデルを使用すると、CSS だけで目的の動作を実現できます。主な問題はブラウザの互換性です。
CSS は次のようになります。

#wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /*or space-between*/
}
.item {
    flex: 1;
}

この回答には、フレックス モデルの詳細を学ぶためのリンクがいくつかあります。

于 2013-05-09T17:17:25.700 に答える