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布局

<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

时间: 2024-11-07 04:44:01

Atitit.100% 多个子元素自适应布局属性的相关文章

元素的BFC特性与自适应布局

一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻雨覆雨都不会影响外部的元素.所以,避免margin穿透.清楚浮动什么的也就好理解了. 什么时候出发BFC呢? 常见的情况如下: -> float 的值不为none ; -> overflow 的值为auto,scroll或hidden; -> display的

HTML布局之左右结构,左边固定右边跟据父元素自适应

HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管理系统左侧菜单,右侧内容.?1. [文件] layout_float_bfc.html <!doctype html><html lang="en"><head>    <meta charset="UTF-8">   

CSS3基础(3)——CSS3 布局属性全接触

一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现容器里项目的对齐.方向.排序(即使在线吗大小位置.动态生成的情况). 弹性盒模型最大的特征在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的洽当布局. 兼容性:http://caniuse.com/#search=flex 2.弹性盒子属性 ①弹性容器属性 属性 描述 display 指

两列布局中单列定宽单列自适应布局的5种思路

× 目录 [1]float [2]inline-block [3]table[4]absolute[5]flex 前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute和flex这五种思路来详细说明如何巧妙地实现布局 思路一: float 说起两列布局,最常见的就是使用float来实现.float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动.如果各浮动元素的高度不同时,可能会出犬牙交错

自适应布局和响应式布局

记得第一次实际工作中接触到响应式布局排版之后,老大问了一个问题,自适应和响应式有什么区别吗? 自己理解的自适应布局是把宽度px值换成百分比,文字px单位换算成em单位,然后解决在不同大小设备上呈现同样的网页,但是这样屏幕过小,内容看上去就会很拥挤.觉得响应式听上去和自适应会差不多. 当时也不懂为什么同样的一个页面要设计3版风格(pc,pad,phone),觉得很麻烦,感觉不知道从何开始下手. 然后就接触到了下面这些内容: 1.meta标签的viewport属性 <meta name=”viewp

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

我熟知的三种三栏网页宽度自适应布局方法

一.前言在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择.当然,具体实现不是那么容易,需要一定的css功力和实践经验.本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提.目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法.这些方法简洁实用,且无兼容性问题.如果您想在您的页面上使用流动性布局,相信本文给您一些启示的. 二.三种方法为了演示的需要,首先限定下示例的布局结构:左中右三栏布

css 多栏自适应布局

在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法.先说说两栏布局,上例子: <div class='container' > <div class='div1' >1</div> <div class='div2' >2</div> </div> 如图,假如

布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)

一.静态布局(static layout) 即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位. 1.布局特点 不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示.常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见于pc端. 2.设计方法 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查