CSS 三列布局IE6 下有问题
发布网友
发布时间：2022-04-20 17:14
共3个回答
热心网友
时间：2022-04-20 18:44
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Y7L8'Blog----CSS3列布局，左右两边固定，中间那列为剩余的宽度</title>
<style type="text/css">
*{margin:0;padding:0}
.a{width:500px;clear:both;overflow:hidden;}
.left{float:left;width:100px;height:100px;background:#f00; }
.center{float:left;height:100px;background:#f0f;}
.right{float:left;width:100px;height:100px;background:#0ff;}
</style>
</head>
<body>
<div class="a">
<div class="right">right</div>
<div class="left">left</div>
<div class="center">center</div>
</div>
</body>
</html>
热心网友
时间：2022-04-20 20:02
<div class="left"></div>
<div class="centen"></div>
<div class="right"></div>
这样不好吗？左中右全部float:left
而且外面大层干嘛用clear；overflow？
你这样的效果，直接外面大层背景为#f0f；里面两个层一个左浮动，一个右浮动，完全可以不要center，为什么要搞的那么复杂，还不兼容
一句话你的结构有问题，楼主试试我的方法
热心网友
时间：2022-04-20 21:36
<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;
}
.main{
position:relative;width:500px; background:#FCC;
}
.left{
position:absolute; top:0px; left:0px;width:100px; height:100px; background:#ccc;
}
.right{
position:absolute;top:0px;right:0px; width:100px; height:100px; background:#c00;
}
.center{
height:100px; margin-left:100px; margin-right:100px; background:#ff0;
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
