Atitit.100% 多个子元素自适应布局属性
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布局
作者:: ★(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; } } 1.5. ---finish
|
- 上一篇:CSS
- 下一篇:CSS弹性盒模型flex在布局中的应用