不确定个数的元素在水平方向上平均分布

 

　　如图所示，方块的个数是按照实际的需求进行进行确定的。当增加方块个数或者减少方块个数，方块仍能在水平方向平均分布。

　　其原理是用屏幕的宽度（实际工作中用实际父容器的宽度）减去所有方块的宽度的和，这样得到的是所有方块的间距的和，记为L。由于第一个方块不用添加marginLeft，所以间距的个数是方块的个数减去1，记为n。那么 L/n 就是每个方块的marginLeft，注意，第一个方块是不用添加marginLeft的。

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/all.css" />
<style type="text/css">
.junbu ul li { width: 100px; height: 100px; background: #fdd;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/all.js"></script>
</head>

<body>
<div class="junbu">
    <ul class="clearfix">
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
        <li class="fl"></li>
    </ul>
</div>
</body>
</html>

css： 

* { padding: 0; margin: 0; list-style: none; font-size: 14px; }
.hide { display: none; }
input { outline: none; }
.fl { float: left; }
.fr { float: right; }
.clearfix { display: block; *display: inline-block; _height: 1%; }
.clearfix:after { content: '\20'; display: block; clear: both; height: 0; visibility: hidden; }

js：

    $('.junbu li:odd').css('backgroundColor','#ddf');
    var li_w = $('.junbu li').length * 100;
    var space_w = $(window).width() - li_w;
    var ml = space_w/($('.junbu li').length -1);
    $('.junbu li:not(:first)').css('marginLeft',ml);

 

posted @ 2015-11-30 11:23  ifIhaveWings  阅读(2592)  评论(0)  编辑  收藏  举报