CSS布局教程：DIV CSS三列式布局的实现方法

　　版权声明：MB5U.com原创，未经本站同意，严禁转载！

　　今天在群里，有一位网友在用DIV CSS实现三列式布局的时候碰到了困难，向网友求助。这一类上部形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。我们今天来说说用DIV CSS三列式布局的实现方法。

　　首先我们构勒一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：

　　这样的结构与两列式的布局是非常类似的，区别就是多了一列。（好象是废话，别扔臭鸡蛋！）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。看下面的图片：