如圖所示，方塊的個數是按照實際的需求進行進行確定的。當增加方塊個數或者減少方塊個數，方塊仍能在水平方向平均分布。
其原理是用屏幕的寬度（實際工作中用實際父容器的寬度）減去所有方塊的寬度的和，這樣得到的是所有方塊的間距的和，記為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);