标签：
1. 两列布局
（1）第一种方法：
html:
1 <div id="Lbar"></div> 2 <div id="Rbar"></div>
css:
1 #Lbar{height: 600px;width:200px;background: red;float: left;} 2 #Rbar{height: 600px;width: 60%;background: green;margin-left: 200px;}
左侧固定bar左浮动，右边自适应bar设置width为百分数，margin-left为左侧bar宽度。
(2)第二种方法
1 <div id="Lbar"></div> 2 <div id="content"> 3 <div id="Rbar"></div> 4 </div>
css:
#Lbar {width: 200px;height:600px;background-color: red;float: left;margin-right: -100%;} #content {float: left;width: 100%;} #Rbar {height:600px;background-color: green;margin-left: 220px;}
左侧固定bar左浮动，margin-right:-100%。右边自适应bar的父元素左浮动，宽度为100%.
margin-right:-100%解释：
往左移动了100%的宽度，使后面的元素移上来占据100%的宽。
“如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠。这对于创建1列是100%宽度而其他列是固定宽度（比如100px）的自适应布局来说是非常有用的方法。 ”
2. 三列布局，左右固定宽度，中间自适应
（1）第一种方法：浮动
html，div顺序：左右中
1 <div id="leftb"></div> 2 <div id="rightb"></div> 3 <div id="middleb"></div>
css
#leftb{width: 200px;height: 400px;background: red;float: left;} #middleb{height: 400px;background: orange;margin: 0 220px;} #rightb{width: 200px;height: 400px;background: blue;float: right;}
左侧bar左浮动，右侧bar右浮动，中间bar设置margin。
（2）第二种方法:绝对定位
html
1 <div id="leftb"></div> 2 <div id="rightb"></div> 3 <div id="middleb"></div>
css
1 #leftb{width: 200px;height: 400px;background: red;position: absolute;left: 0;} 2 #middleb{height: 400px;background: orange;margin: 0 220px;} 3 #rightb{width: 200px;height: 400px;background: blue;position: absolute;right: 0;}
左侧bar，left：0；右侧bar，right：0。
标签：
原文地址：http://www.cnblogs.com/CassieLY/p/5215580.html
