我熟知的三种三栏网页宽度自适应布局方法
by zhangxinxu
from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=370
一、前言
在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和
实践经验。本文不讲细节,只讲外部的自适应架构,这也是实现整个页面自适应的前提。目前为止,我所熟知的左中右三栏宽度自适应于浏览器的方法有三个:绝对定位法
,margin负值法
以及自身浮动法
。这些方法简洁实用,且无兼容性问题。如果您想在您的页面上使用流动性布局,相信本文给您一些启示的。
二、三种方法
为了演示的需要,首先限定下示例的布局结构:左中右三栏布局,左右两栏宽度固定(要想不固定将宽度值改为百分值即可),中间栏宽度自适应。左右两栏的宽度为200像素。
1、绝对定位法
这或许是三种方法里最直观,最容易理解的:左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。
您可以狠狠地点击这里:绝对定位法演示demo
css代码如下(为截图):
HTML代码为(图片):
这里的左中右三个div的顺序是可以任意调整的,这与剩下的两中方法就不一样了,需要注意一下。
此方法的优点是,理解容易,上手简单,受内部元素影响而破坏布局的概率低,就是比较经得起折腾。
缺点在于:如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。然而,一般情况下,除非用户显示器分辨率宽度>=1600像素,否则用户不会把浏览器缩小到1000像素以下的,所以该缺陷危害指数3.
2、margin负值法
这种方法是在实际的网站中应用的最多的,我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先,中间的主体要使用双层标签。外层div宽度
100%显示,并且浮动(本例左浮动,下面所述依次为基础),内层div为真正的主体内容,含有左右210像素的margin值。左栏与右栏都是采用
margin负值定位的,左栏左浮动,margin-left为-100%,由于前面的div宽度100%与浏览器,所以这里的-100%margin值
正好使左栏div定位到了页面的左侧;右侧栏也是左浮动,其margin-left也是负值,大小为其本身的宽度即200像素。
见下面的css代码:
HTML代码:
您可以狠狠地点击这里:margin负值法演示demo
您需要注意几个div的顺序,无论是左浮动还是右浮动,先是主体部分div,这是肯定的,至于左右两栏谁先谁后,都无所谓,我测试了IE6,Firefox,以及chrome浏览器,表现一致。
此方法的优点:三栏相互关联,可谓真正意义上的自适应,有一定的抗性——布局不易受内部影响。
缺点在于:相对比较难理解些,上手不容易,代码相对复杂。出现百分比宽度,过多的负值定位,如果出现布局的bug,排查不易。
3、自身浮动法
此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动,右栏右浮动,主体直接放后面,就实现了自适应。
您可以狠狠地点击这里:自身浮动法演示demo
css代码如下:
HTML代码:
这里三个div标签的顺序的关键是要把主体div放在最后,左右两栏div顺序任意。
此方法的优点是:代码足够简洁与高效
不足在于:中间主体存在克星,clear:both属性。如果要使用此方法,需避免明显的clear样式。
三、下载
您可以狠狠地单击这里:demo打包下载
(zip )
四、结语
table表格可谓是自适应布局的利器,如今Google的产品页面,yahoo等自适应页面都还是使用的table技术,原因在于table本身的自适
应能力。然而,虽然它是Google,它是yahoo,但是我依然很鄙视,您可以试试用firebug去看一下Google页面的HTML代
码,unbelievable!层级多的惊人,代码真是多,臃肿!我过去觉得可能是某些功能之需,现在发现是追求技术,可扩展,自适应的副产物。我多次实
践,可以非常肯定的说:div完全可以取代table实现自适应布局。
本文提供的仅仅是我个人知道的几种自适应方法,其实,我相信,肯定还有其他的方法,这就需要你我对其关注思考并发现了。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活
[http://www.zhangxinxu.com
]
本文地址:http://www.zhangxinxu.com/wordpress/?p=370
分享到:
相关推荐
三栏布局,中间自适应宽度,三栏自适应高度的布局
三栏布局“左右宽度固定,中间自适应宽度” 方法1、设置浮动,使文档脱离文档流,注意层的顺序 方法2、同样通过负边距来实现,缺点是需要另外增加一个层 方法3、也可以通过绝对定位来实现
今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
首先是布局,左右两栏布局,中间留出可拖动的地方。布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” ...
所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1...
下面和大家一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
假设高度已知,请写出三栏布局,其中左右宽度均为300px,中间自适应。 看了上面的题目,有经验的人也许会觉得很简单,仔细想想,如果我们来写,能写出几种方案呢?一般都会想到两种吧,float和position定位,其实...
百度面试碰到的题,要实现如下布局效果 其中中间这紫色的一栏的大小随字体的多少而变宽/变窄,且多出的文字自动省略为[…],右边的绿色栏要紧紧连着紫色这一栏。 主要对紫色这一栏的操作为: 1.flex: 0 1 auto ...
我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 本文源代码请猛戳三栏布局源码,欢迎star和fork 一、浮动布局 <!DOCTYPE ...
模板名称:免费WordPress 三栏资讯博客主题源码下载 该模板网站很容易吸引访客点击,提升ip流量和pv是非常有利的。 本套模板采用现在非常流行的全屏自适应布局设计,且栏目列表以简洁,非常时尚大气。 页面根据...
如题:高度已知,左右栏宽度300px,中间自适应: 弹性盒子本身就是并排的,我们设置宽度即可。 用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,...
圣杯布局和双飞翼布局 ...两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间部分在DOM结构上优先,以便先行渲染。(核心目的:先解析中间栏,展示当前页面的核心内容,提升用户体验。)
3.8 三列浮动中间列宽度自适应 3.9 高度自适应 3.10 盒模型详解(.Box Model) 3.10.1 什么是盒模型 3.10.2 盒模型的细节 3.10.3 上下margin叠加问题 3.10.4 左右margin加倍问题 3.11 深入浮动(Float) 3.11.1 文档流...
网页开发中,经常会遇见左中右垂直三栏的布局方式,两侧结构宽度固定,中间自适应,有时候需要优先加载中间区域,那么便在DOM结构上便有所要求,需要中间区域在前,左右区域在后。 首先三个元素横向排列,用浮动...
1.要求:如上图中的,三栏目布局,中间的MAIN是自适应浏览器的宽度,左LEFT固定宽200PX,右RIGHT固定宽200PX; 复制代码代码如下: .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000...
9.6.2 三栏布局 212 9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 页面布局和规划 219 10.1.1 页面设计 220 10.1.2 文档目录和模版设计 221 10.2 首页设计 222 10.2.1 首页...
双飞翼布局,属于主标签在前面的自适应三栏布局,解决了圣杯布局的主宽度必须大于aside的问题。 圣杯布局 瀑布流布局 其他UI效果 商品列表 图片商品列表(可以加载) 初步轮播 图片懒加载 tab组件封装 拖拽功能 ...
另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 常见的单列布局有两种: header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种,先通过对header,...