上一节我们也提到了div的左右分栏布局,但没有实现真正意义上的分栏。这一节,我们就来结合css样式实现分栏。
在讲解分栏之前,有必要对单一列的布局做一个了解。
如代码:

XML/HTML代码
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type=“text/css”>
  5. #layout{
  6. background-color:#eeeeee;
  7. border:1px solid #33ccff;
  8. width:240px;
  9. height:150px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id =“layout”>单一列的固定宽度</div>
  15. </body>
  16. </html>

在css中我们分别实现了id为layout的div的背景色,边框的线粗、线样式、线颜色,以及div的宽和高。
看如图效果:

上图中实现的是固定的宽和高,如果想实现自适应宽度,我们可以用百分数来控制。即把其中的width值改为width:N%,这样就会根据浏览器当前宽度自动调整。

设定了div的总宽度,但它会按默认的方式居左显示。那么怎么实现它的固定列宽和自适应列宽都能够居中显示呢?这就用到它的外边距属性:
margin:0px auto;
margin属性表示对象的外边距,分别为:上边距、右边距、下边距、左边距(即按照顺时针顺序)。
当书写一个参数时,表示四个边距均为此参数。
当只书写两个参数时,第一个参数表示:上下边距,第二个参数表示左右边距。
当书写三个参数时,第一个表示上边距,第二个表示左右边距,第三个表示下边距。
margin属性除了支持数值外,还支持auto值,表示让浏览器自动判断边距。
这样margin:0px auto;就表示上下边距均为0px,左右边距根据浏览器自动判断一致,从而实现了居中效果。

试一试在上面代码中加入此句后,为:

XML/HTML代码
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type=“text/css”>
  5. #layout{
  6. margin:0px auto;
  7. background-color:#eeeeee;
  8. border:1px solid #33ccff;
  9. width:240px;
  10. height:150px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id =“layout”>单一列的固定宽度</div>
  16. </body>
  17. </html>

预览效果图为:图

注意:以上代码在FireFox中测试正常,但在IE6中测试以上代码,一定要在顶部加入以下声明,用以定义XHTML文档类型。否则不能呈现居中样式,当然这个问题在IE7中已经不会再出现了。代码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

小知识:一个标准的XHTML必须以doctype标签作为开始。doctype用于定义文档类型。文档类型分为三种:分别为Transitional类型,Strict类型,Frameset类型。
Transitional是一种过渡类型,使用过渡类型的XHTML网页,浏览器对它的解析比较宽松。允许使用HTML4.01中的标签,但必须符合XHTML语法。
Strict是一种严格类型。浏览器对此类型的XHTML的解析相对严格。不允许使用任何表现样式的标识和属性,如在元素中直接使用背景色bgcolor属性。
代码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd”>

Frameset框架型网页,如果网页使用了框架结构,有必要在文档中声明。代码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd”>

原文地址:http://www.chaojibaby.com/blog/article.asp?id=110