javascript - 自動オーバーラップの要素の配置方法

Question

固定サイズの div に可変量の要素があります。要素が 5 つ以下である限り、並べて配置するのに十分なスペースがあります。しかし、より多くのものがあるとすぐに、それらが互いにわずかに重なり合うようにしたいので、それらはすべて div 内にとどまります。ゲームでさまざまな量のカードを保持していると考えてください。要素の追加/削除時にJavaScriptを使用して「手動で」制御する以外に、これを行う方法は考えられません。ブラウザにこの効果を処理させる方法はありますか?

Answer 1

http://jsfiddle.net/mFP9E/

$(document).ready(function(){
  $("ul").each(function(){
    var total = $(this).find("li").length;
    var elWidth = 100; //Element width
    if(total > 5) {
      var space = Math.ceil((((elWidth * total)-(elWidth * 5))/total)/2);
      $(this).children("li").css("margin","0 -"+space+"px");                      
    }                     
  });
});​