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

教程Tag：暂无Tag,欢迎添加,赚取U币!

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

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

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

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

　　我们根据上面的图片，整理出各个div的id以及他们的关系：

示例代码 [www.mb5u.com]

　　顶部：header；
　　中部三列的容器：divall；
　　左侧：sider_a；
　　主内容区：main；
　　右侧：sider_b；
　　底部：footer

他们的嵌套关系如下图：

　　我们整理出HTML代码：

示例代码 [www.mb5u.com]

<div id="header">header</div>
<div id="divall">
<div id="sider_a">sider_a</div>
<div id="main">main</div>
<div id="sider_b">sider_b</div>
</div>
<div id="footer">footer</div>

　　我们开始编写CSS进行布局：

示例代码 [www.mb5u.com]

* {
margin:0;
padding:0;
font-size:1em;
}

　　整体局布声明：消除边距，设置文字大小。
　　假如不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。

示例代码 [www.mb5u.com]

#header {
width:1002px;
height:100px;
margin:0 auto;
background:#06f;
}
#divall {
width:1002px;
margin:0 auto;
background:#fff;
}
#footer {
width:1002px;
height:60px;
margin:0 auto;
background:#999;
}

　　顶部：宽度高度设置，水平居中对齐，背景色为#06f；
　　中部三列的容器：宽度设置，水平居中对齐，背景色为白色；
　　底部：宽度高度设置，水平居中对齐，背景色为#999。

示例代码 [www.mb5u.com]

#sider_a {
width:220px;
float:left;
background:#f93;
}
#main {
width:580px;
float:left;
margin-left:6px;
background:#dceafc;
}
#sider_b {
width:190px;
float:right;
background:#ccc;
}

　　左侧（sider_a）：宽度设置，向左浮动，背景色为#f93；
　　主内容区（main）：宽度设置，向左浮动，左边距为6px，背景色为#dceafc；
　　右侧（sider_b）：宽度设置，向右浮动，背景色为#ccc；
　　为什么主内容区左边距为6px呢？我们是这样计算的：
　　　　1002-220-580-190=12px
　　　　12/2=6px; 实现中间两条空白分割线相等，均为6px。

　　写到这里，我们布局应该算是完成了，且慢，让我们看看IE与FF这两个让我们抓狂的东东中，显示效果是不是一样。