**问题：**html页面里高500px，宽100%的div中有10个高度为120px，宽度为250px的div块。采用流动布局的方式，当浏览器变大或者变小的时候，这10个块都可以等间距的排成1~10行(最少1行排10个，最多每行一个排10行)，每行的块的数量相等。
css布局：
<style type="text/css">
#main{
width:100%;
height:500px;
overflow-y:atuo;
}
.mydiv{
width:250px;
height:120px;
float:left;
backgroud-color:red;
}
</style>html页面：
<html>
<body>
<div id="main">
<div id="mydiv1" class="mydiv"></div>
<div id="mydiv2" class="mydiv"></div>
<div id="mydiv3" class="mydiv"></div>
<div id="mydiv4" class="mydiv"></div>
<div id="mydiv5" class="mydiv"></div>
<div id="mydiv6" class="mydiv"></div>
<div id="mydiv7" class="mydiv"></div>
<div id="mydiv8" class="mydiv"></div>
<div id="mydiv9" class="mydiv"></div>
<div id="mydiv10" class="mydiv"></div>
</div>
</body>
</html>js部分控制页面动态布局：
<script type="text/javascript">
window.onload=setdivblock;//加载时计算
window.onresize=setdivblock;//浏览器大小改变时重新计算
function setdivblock(){
var mainwidth = parseInt($("#main").css("width"));
//判断是否出现滚动条,由于滚动条有20px左右的宽度，所以如果出现滚动条需要减去这部分
if (document.getElementById("main").clientWidth < document.getElementById("main").offsetWidth - 4)
{
mainwidth = mainwidth - 20;
}
//每个div元素块的宽度是250px，如果最小间距为20px
var surpluswidth = mainwidth % 270;//计算以270平铺元素块后的剩余宽度
var count =parseInt( mainwidth / 270);//计算以270平铺可以放置的元素块个数
if (surpluswidth < 250) {
//如果剩余宽度小于元素块的宽度，说明剩下的部分无法放置一个完整的元素块，一行最多放置count个块。若每行有n个块，则有n-1个间隔。
var tempmarginright = parseInt((botdivwidth - count * 250) / (count - 1));//间距计算
}
else {
//如果剩余宽度大于元素块宽度，说明剩下的部分还能放置一个块而又结余，则一行最多可以放置count+1个块
var tempmarginright = parseInt((botdivwidth - (count+1) * 250) / count);
count = count + 1;
}
//设置每个div块的间距
for (var i = 1; i <= 10; i++) {
if (i % count == 0) {//判读是否为每行的最后一个元素
$("#mydiv"+i).css("margin-right", "0px");
}
else {
$("#mydiv"+i).css("margin-right", tempmarginright + "px");
}
}
}
</script>