Atitit.100% 多个子元素自适应布局属性

1.1. 原理1

1.2. Table布局1

1.3. Css布局1

1.4. 判断amazui加载完毕2

1.1. 原理

每个子元素平均分配，但是有个min-width... min-width优先

算法：首先算出平均值，然后与每一个带min-width的元素比较，大于平均值的min-width的元素单独一组。

其他元素再次计算剩余平均值，分组，直到没有大与当前平均值的元素

1.2. Table布局

<tbody>

<tr>

</tr>

</tbody>

</table>

作者:: ★(attilax)>>> 绰号:老哇的爪子（全名：：Attilax Akbar Al Rapanui 阿提拉克斯阿克巴阿尔拉帕努伊）汉字名：艾龙， EMAIL:1466519819@qq.com

转载请注明来源： 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;

}

巴特西

Atitit.100% 多个子元素自适应布局属性

1.1. 原理

1.2. Table布局

1.3. Css布局

1.4. 判断amazui加载完毕

1.5. ---finish

最新文章

热门文章