**問題：**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>