您的位置：首页 > Web前端 > CSS

DIV+CSS经典??三列布局（左右固定 中间自适应）

2009-04-03 09:15 579 查看
转自http://www.zendstudio.net/post/52/

一直都不断有人在问：“我要用DIV+CSS实现三列布局，并且要左右固定宽度，中间自适应，要怎么弄？”
我一般都是这样回答：“中间设margin-left留出leftdiv的宽度，设margin-right留出rightdiv的宽度，然后leftdiv左浮动，rightdiv右浮动！”，不过居然有人说不行。我只好用实践证明我的真理的正确性。
OK!下面是我的完整的测试代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.box{
width:100%;
font-size:12px;
}
.leftdiv{
float:left;
width:200px;
height:600px;
background:#f00;
}
.middlediv{
background:#0f0;
height:600px;
margin:0 200px;
}
.rightdiv{
float:right;
width:200px;
height:600px;
background:#00f;
}
.clearfix{
clear:both;
font-size:0;
height:0;
}
-->
</style>
</head>

<body>
<div class="box">
<div class="leftdiv">此处显示 class "leftdiv" 的内容</div>
<div class="rightdiv">此处显示 class "rightdiv" 的内容</div>
<div class="middlediv">此处显示 class "box" 的内容</div>
<div class="clearfix">此处显示 class "clearfix" 的内容</div>
</div>
</body>
</html>

一定注意三个DIV的顺序！没有修复IE 3px bug，但几乎不影响表现。以上代码在IE 6、FF中测试通过。
从此推断，两列的布局就是去掉右边的DIV，然后中间去掉margin-right。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航