博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Atitit.100% 多个子元素自适应布局属性
阅读量:6680 次
发布时间:2019-06-25

本文共 1245 字,大约阅读时间需要 4 分钟。

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:1466519819@qq.com

转载请注明来源: http://blog.csdn.net/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

 

你可能感兴趣的文章
Html5本地图片读取及裁剪
查看>>
MySQL数据库操作个人手记
查看>>
我的友情链接
查看>>
泡沫学员CSS切图学习总结
查看>>
centos 学习日记 文件隐藏属性 chattr lsattr
查看>>
redhat yum 失败
查看>>
log4j2日志框架使用简单概述
查看>>
新手处理事故之误删boot目录以及更严重的删除操作
查看>>
bootstap-table 只显示列名和表格不显示数据
查看>>
linux 网站架设调优Apache(四)
查看>>
vi的使用
查看>>
当你需要处理XML文档时
查看>>
【Python之旅】第五篇(一):Python Socket通信原理
查看>>
pycharm 5注册
查看>>
java-buildpack源码分析之Release
查看>>
iptables实现网络防火墙及地址转换
查看>>
Objective-C基础语法规则教程
查看>>
fiddler的使用
查看>>
Spring事务5种属性
查看>>
css图片对齐排版思路
查看>>