大家理解起來應(yīng)該沒有什么困難，其實(shí)三欄式布局和兩欄式是相同的，下面我講一個(gè)最簡(jiǎn)單的三欄布局制作方法。 DivCss布局二--三欄布局 來源：黃超 [點(diǎn)擊放大] 請(qǐng)看上面的圖片，只將上篇文章中的圖片變成了三欄而已，Header和Footer都沒有變，所以我們只講解中間部分的布局方法就好了。 上篇文章定義SideBar為居左顯示，MainBody為居右顯示，而這里是三列，兩個(gè)窄列在兩邊，寬的主要內(nèi)容在中間。 由此我們可以初步定為讓LeftBar向左浮動(dòng)，RightBar向右浮動(dòng)，中間的MainBody也讓它居左浮動(dòng)。 Html代碼 <div id="PageBody"><!--頁面主體-->
<div id="Leftbar">左側(cè)邊欄</div>
<div id="MainBody">主體內(nèi)容</div>
<div id="Rightbar">右側(cè)邊欄</div>
</div> CSS代碼 /*頁面主體*/
#PageBody {clear:both;width:900px;height:400px;background:#CCFF00;}/*主體部分的外框*/
#Leftbar {width:200px;float:left;}/*左側(cè)欄*/
#Rightbar {width:200px;float:right;}/*右側(cè)欄*/
#MainBody {width:500px;float:left;height:100%;background:#EEE;}/*中間主要內(nèi)容欄*/ LeftBar和RightBar都定義為200像素，分別居左居右顯示；Mainbody定義為500像素，居左跟在LeftBar后面顯示，兩者加起來是最外邊框的900像素，不能大過此寬度，否則他們將不能在同一行上顯示。 最后，按F12預(yù)覽一下吧。 也許有些朋友認(rèn)為這個(gè)方法不是最好的，當(dāng)然，布局方法還有很多，使用定位的方法制作就很不錯(cuò)的，而這里，我講的只是最簡(jiǎn)單的一種。

總結(jié)

以上是生活随笔為你收集整理的三栏布局（两边固定，中间自适应）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。