今天在群里，有一位网友在用DIV CSS实现三列式布局的时候碰到了困难，向网友求助。这一类上部形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。我们今天来说说用DIV CSS三列式布局的实现方法。
首先我们构勒一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：
这样的结构与两列式的布局是非常类似的，区别就是多了一列。（好象是废话，别扔臭鸡蛋！）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。看下面的图片：
我们根据上面的图片，整理出各个div的id以及他们的关系：
顶部：header；
中部三列的容器：divall；
左侧：sider_a；
主内容区：main；
右侧：sider_b；
底部：footer
他们的嵌套关系如下图：
我们整理出HTML代码：
<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进行布局：
* {
margin:0;
padding:0;
font-size:1em;
}
整体局布声明：消除边距，设置文字大小。
假如不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。
#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。
#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这两个让我们抓狂的东东中，显示效果是不是一样。
在IE环境中，一切正常，没有任何问题了。但在FF中footer和我们玩起了捉迷藏，跑到上面去了。我们在前面的文章《CSS布局教程：用DIV CSS实现国内经典式三行两列布局》?id=518 曾经出现过样的现象，是由于未清除浮动而引发的后果，关于清除浮动的知识，可以参考这里： 我们在divall容器的最下面清除一下浮动就可以了。如代码：<br style=\"clear:both;\" />。
我们进行了一些修饰，填充一些内容。最终效果：>>>查看最终的网页效果<<<
版权声明：原创，未经本站同意，严禁转载！
相关文章
精彩导读
热门资讯
关注我们
