자동 겹침 요소를 배치하는 방법

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");      
    }      
    }); 
});​