三栏布局（两边固定，中间自适应） js与前端

大家理解起来应该没有什么困难，其实三栏式布局和两栏式是相同的，下面我讲一个最简单的三栏布局制作方法。

DivCss布局二--三栏布局来源：黄超 [ 点击放大]

请看上面的图片，只将上篇文章中的图片变成了三栏而已，Header和Footer都没有变，所以我们只讲解中间部分的布局方法就好了。上篇文章定义SideBar为居左显示，MainBody为居右显示，而这里是三列，两个窄列在两边，宽的主要内容在中间。由此我们可以初步定为让LeftBar向左浮动，RightBar向右浮动，中间的MainBody也让它居左浮动。Html代码

左侧边栏
主体内容
右侧边栏

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预览一下吧。也许有些朋友认为这个方法不是最好的，当然，布局方法还有很多，使用定位的方法制作就很不错的，而这里，我讲的只是最简单的一种。