二列和三列布局-Web标准(div+css)教程

敖游

2016-03-06

来源：遨游建站

　　代码原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　body { margin:0;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

　　七、三列固定宽度

　　三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，如下，添加一个id为content的父容器。

　　在源代码里选中这三个div，然后点击工具栏上的“插入div标签”按钮，这时弹出的窗口插入项会默认为：在选定的内容旁换行，输入id为content，然后给这个div定义个宽度

　　三列固定宽度出来了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即可

　　代码原文：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<style>

　　body { margin:0;}

　　#content { width:470px; margin:0 auto;}

　　#side { background: #99FF99; height: 300px; width: 120px; float: left; }

　　#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

　　#main { background: #99FFFF; height: 300px; margin:0 120px; }

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　八、IE6的3像素bug

　　3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：

　　body { margin:0;}

　　#side { float: left; background:#99FF99; height: 300px; width: 120px;}

　　#main { background: #99FFFF; height: 300px;}

　　html代码如下：

　　下面看看IE6和IE7中的显示效果：

　　从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

　　body { margin:0;}

　　#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}

　　#main { background: #99FFFF; height: 300px; }

　　看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。

　　文章出处：标准之路编辑：杨雨晨思

3 / 3

企业网站建设

阅读原文

阅读341

下一篇：纵向导航菜单及二级弹出菜单-Web标准(div+css)教程

上一篇：一列布局-Web标准(div+css)教程

写评论...