CSS布局方法

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。

 

转载于:https://www.cnblogs.com/CassieLY/p/5215580.html