三种三栏网页宽度自适应布局方法
来源:互联网 发布:linux ssh 暴力破解 编辑:程序博客网 时间:2024/05/06 21:28
三种三栏网页宽度自适应布局方法<网上收集,供大家一同学习>
内容提要: 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提。目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法,margin负值法以及自身浮动法。这些方法简洁实用,且无兼容性问题。如果您想在您的页面上使用流动性布局,相信本文给您一些启示的。
三种方法
为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。左右两栏的宽度为200像素。
1、绝对定位法
这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
<style type="text/css">
html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}
</style>
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>
</body>
这里的左中右三个div的顺序是可以任意调整的,这与剩下的两中方法就不一样了,需要注意一下。
此方法的优点是,理解容易,上手简单,受内部元素影响而破坏布局的概率低,就是比较经得起折腾。
缺点在于:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。然而,一般情况下,除非用户显示器分辨率宽度>=1600像素,否则用户不会把浏览器缩小到1000像素以下的,所以该缺陷危害指数3.
2、margin负值法
这种方法是在实际的网站中应用的最多的,我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先,中间的主体要使用双层标签。外层div宽度100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
<body
>
<div
id
="main"
>
<div
id
="body"
></div
>
</div
>
<div
id
="left"
></div
>
<div
id
="right"
></div
>
</body
>
<style
type
="text/css"
>
html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
</style
>
您需要注意几个div的顺序,无论是左浮动还是右浮动,先是主体部分div,这是肯定的,至于左右两栏谁先谁后,都无所谓,我测试了IE6,Firefox,以及chrome浏览器,表现一致。
此方法的优点:三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。
缺点在于:相对比较难理解些,上手不容易,代码相对复杂。出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。
3、自身浮动法
此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动,右栏右浮动,主体直接放后面,就实现了自适应。
<body
>
<div
id
="left"
></div
>
<div
id
="right"
></div
>
<div
id
="main"
></div
>
</body
>
<style
type
="text/css"
>
html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style
>
这里三个div标签的顺序的关键是要把主体div放在最后,左右两栏div顺序任意。
此方法的优点是:代码足够简洁与高效
不足在于:中间主体存在克星,clear:both属性。如果要使用此方法,需避免明显的clear样式。
- 三种三栏网页宽度自适应布局方法
- 三种三栏网页宽度自适应布局方法
- 三种三栏网页宽度自适应布局方法
- 我熟知的三种三栏网页宽度自适应布局方法
- 三栏网页宽度自适应布局方法
- 三栏网页宽度自适应布局方法
- 从网上学习的网页宽度自适应布局方法
- 三栏网页宽度自适应布局方法,margin负值法
- 自适应布局---自适应宽度
- 手机网页宽度自适应屏幕宽度的方法
- Android网页宽度自适应手机屏幕宽度的方法
- 一个自适应的宽度的两列网页布局
- 二列右列宽度自适应布局
- DIV 自适应宽度 布局
- CSS布局-宽度自适应
- css布局 宽度自适应
- 宽度自适应布局
- BFC宽度自适应布局
- 收藏
- 字符串按顺序重组方法之自定义函数(字符串拆分重组)
- 删除表字段的sql语句
- 小憩
- 本地安装Visual studio 2010的帮助文档
- 三种三栏网页宽度自适应布局方法
- (转)GTK+ Widget的内部结构与工作流程
- 那些相见恨晚的 JavaScript 技巧
- 世界上最巨大的浪费,应该是中国的房地产
- Ruby IDE简介
- jsp连接oracle数据库
- 腾讯笔试题目之一 最简单的那个
- 消除宏的副作用
- 2010年4月26日(新公司入职,第四周星期一)