1、前言
在现在各个分辨率显示器N足鼎立的时期，页面采用流动性布局（亦可称自适应布局）不失为一个好选择。固然，具体实现不是那么容易，须要必定的css功力和实践经验。本文不讲细节，只讲外部的自适应架构，这也是实现整个页面自适应的前提。目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。若是您想在您的页面上使用流动性布局，相信本文给您一些启示的。chrome
2、网页宽度自适应布局三种方法
为了演示的须要，首先限定下示例的布局结构：左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改成百分值便可），中间栏宽度自适应。左右两栏的宽度为200像素。浏览器
一、绝对定位法
这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。因而实现了三栏自适应布局。架构
css代码以下：
并发
HTML代码为：
wordpress
这里的左中右三个div的顺序是能够任意调整的，这与剩下的两中方法就不同了，须要注意一下。布局
此方法的优势是，理解容易，上手简单，受内部元素影响而破坏布局的几率低，就是比较经得起折腾。
缺点在于：若是中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到必定程度，会发生层重叠的状况。然而，通常状况下，除非用户显示器分辨率宽度>=1600像素，不然用户不会把浏览器缩小到1000像素如下的，因此该缺陷危害指数3.post
二、margin负值法
这种方法是在实际的网站中应用的最多的，我我的感受多少有些跟风的嫌疑。此方法很难用一句话归纳。首先，中间的主体要使用双层标签。外层div宽度100%显示，而且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，因为前面的div宽度100%与浏览器，因此这里的-100% margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其自己的宽度即200像素。测试
css代码：
HTML代码：
您须要注意几个div的顺序，不管是左浮动仍是右浮动，先是主体部分div，这是确定的，至于左右两栏谁先谁后，都无所谓，我测试了IE6，Firefox，以及chrome浏览器，表现一致。
此方法的优势：三栏相互关联，可谓真正意义上的自适应，有必定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，若是出现布局的bug，排查不易。
三、自身浮动法
此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。
CSS代码以下：
HTML代码：
这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。
此方法的优势是：代码足够简洁与高效
不足在于：中间主体存在克星，clear:both属性。若是要使用此方法，需避免明显的clear样式。
3、结语
Table表格可谓是自适应布局的利器，现在Google的产品页面，Yahoo等自适应页面都仍是使用的table技术，缘由在于table自己的自适应能力。然而，虽然它是Google，它是Yahoo，可是我依然很鄙视，您能够试试用firebug去看一下Google页面的HTML代码，unbelievable！层级多的惊人，代码真是多，臃肿！我过去以为多是某些功能之需，如今发现是追求技术，可扩展，自适应的副产物。我屡次实践，能够很是确定的说：div彻底能够取代table实现自适应布局。
本文提供的仅仅是我我的知道的几种自适应方法，其实，我相信，确定还有其余的方法，这就须要你我对其关注思考并发现了。