如图所示，方块的个数是按照实际的需求进行进行确定的。当增加方块个数或者减少方块个数，方块仍能在水平方向平均分布。
其原理是用屏幕的宽度（实际工作中用实际父容器的宽度）减去所有方块的宽度的和，这样得到的是所有方块的间距的和，记为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 { 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);