html左中右自适应布局,左中右自适应宽度布局（两边固定中间自适应）

CSS三栏布局的时候，要左右固定宽度，中间自适应宽度。

一、使用绝对定位。

绝对定位需要设置左右边距(实际应用中往往需要在外面套一个相对定位的盒子)。整个Demo如下(通过Firefox与IE5.5——8测试)：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

三栏布局

* { margin:0; padding:0; }

#main { position:absolute; left:200px; right:200px }/*绝对定位，使content不占据html文档流空间，让后面的left,right浮上去*/

#left, #right { width:200px; }

#left { float:left; }

#right { float:right; }

content

left

right

二、Main左浮动。

如果Main浮动的话首先要解决宽度自适应的问题，设置宽度100%显示，然后就得把Left拉到Main左侧，这里巧妙使用两种偏移方法。IE6会有兼容问题，需要Hack一下。

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

三栏布局-浮动方法

* { margin:0; padding:0; }

#wrap { padding:0 300px 0 200px; *overflow:hidden;  }

#main { float:left; width:100%; }

#left, #right { position:relative; _display:inline; }

#left { width:200px; float:left; margin-left:-100%; right:200px; _right:-300px; }

#right { width:300px; float:right; margin-right:-300px; }

content

left

right2

关于侧栏宽度固定，主要部分宽度自适应的布局是再普通不过了，而大部分人的做法就是把侧栏放在自适应盒子前面，然后进行浮动解决，从来没有想过使用最优化的html文档流完成这个布局。第一种方法由于用了绝对定位，适合在特殊应用中使用，常规布局推荐使用第二种解决。