如何定位元素以进行自动重叠

时间:2012-08-02 12:47:22

标签: javascript html css

我在固定大小的div中有可变数量的元素。只要有<= 5个元素,它们就有足够的空间并排放置。但是只要有更多,我希望它们彼此略微重叠,所以它们都留在div里面。可以把它想象成在游戏中持有不同数量的牌。除了在添加/删除元素时使用JavaScript“手动”控制它,我想不出任何方法可以做到这一点。有没有办法让浏览器为我处理这个效果?

1 个答案:

答案 0 :(得分: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");                      
    }                     
  });
});​