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

總結

以上是生活随笔為你收集整理的CSS布局方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。