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预览一下吧。

    也许有些朋友认为这个方法不是最好的，当然，布局方法还有很多，使用定位的方法制作就很不错的，而这里，我讲的只是最简单的一种。