Atitit.100% 多個子元素自適應佈局屬性 1.1. 原理1 1.2. Table佈局1 1.3. Css佈局1 1.4. 判斷amazui載入完畢2 1.1. 原理 每個子元素平均分配，但是有個min-width... min-width優先 演算法：首先算出平均值，然後與每一個帶min-wi ...
Atitit.100% 多個子元素自適應佈局屬性
1.1. 原理
每個子元素平均分配，但是有個min-width... min-width優先
演算法：首先算出平均值，然後與每一個帶min-width的元素比較，大於平均值的min-width的元素單獨一組。
其他元素再次計算剩餘平均值，分組，直到沒有大與當前平均值的元素
1.2. Table佈局
<table width="100%" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="min-width:110px"></td>
</tr>
</tbody>
</table>
作者:: ★(attilax)>>> 綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍， EMAIL:[email protected]
轉載請註明來源： http://www.cnblogs.com/attilax/
1.3. Css佈局
Min-width list_jobus_cp.js
function SelectorWidthAdj()
{
if(screen.width>320 && screen.width<400)
{
//alert($(".am-selected").length);
var ctrl=$(".am-selected").last();
var widthx=screen.width-$(ctrl).width()-5;
var width_per=widthx/3;
$(".am-selected").each(function(index, element) {
$(element).css("width",width_per+"px");
//alert(index);
if(index>1)
return false;
});
}
}
1.4. 判斷amazui載入完畢
if(screen.width>320 && screen.width<400)
{
var timerQ5=window.setInterval(function(){
if(isSelectorLoadFinished())
{
SelectorWidthAdj();
window.clearInterval(timerQ5);
}
},30);
}
function isSelectorLoadFinished()
{
if($(".am-selected").length<4)
return false;
var ctrl=$(".am-selected").last();
if(ctrl)
{
if($(ctrl).width()>100)
return true;
else
return false;
}
}
1.5. ---finish
