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

總結

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

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