Heim >Web-Frontend >HTML-Tutorial >Atitit.100% 多个子元素自适应布局属性_html/css_WEB-ITnose

Atitit.100% 多个子元素自适应布局属性_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:17:03989Durchsuche

 

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

 

1.3. Css布局

Min-width   list_jobus_cp.js

function SelectorWidthAdj()

{

if(screen.width>320 && screen.width

{

//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

{

   var  timerQ5=window.setInterval(function(){

  if(isSelectorLoadFinished())

   {

SelectorWidthAdj();

window.clearInterval(timerQ5);

   }

   

   },30);

   

}

 

 

function isSelectorLoadFinished()

{

  if($(".am-selected").length

   return false;

var ctrl=$(".am-selected").last();

if(ctrl)

{

if($(ctrl).width()>100)

return true;

else

return false;

}

}

1.5. ---finish

 

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn