用CSS+DIV实现固定宽度的三列式分栏
总宽度为760,左中右三栏宽度分别为200、460、100,宽度固定,高度不固定,也就是说这三栏随着内容不同都有可能最高,上下再安排顶部菜单和页脚。在IE6、7,Fire...
总宽度为760,左中右三栏宽度分别为200、460、100,宽度固定,高度不固定,也就是说这三栏随着内容不同都有可能最高,上下再安排顶部菜单和页脚。在IE6、7,Firefox等常见浏览器中浏览不能变形。检验成功后再送高分。谢谢!
另外,如果再加上三栏的高度自适应最高的一栏就更好了。 展开
另外,如果再加上三栏的高度自适应最高的一栏就更好了。 展开
2个回答
展开全部
帮你做了,很简单。把代码复制到记事本,把后缀名改为 ".htm"就可以看了。 为了让你看的更清楚,我把每列加了颜色,(兼容Firefox,IE,等浏览器)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin-right:auto;margin-left:auto;font-size:12px;}
#layer {height: auto;width: 760px;height:600px;}
#left {float: left;height: auto;width: 200px;height:600px;background-color:#DAF4FE;}
#conter {float: left;height: 600px;width: 460px;background-color:#FDF1C1;}
#right {float: left;height: 600px;width: 100px;}
#right {background-color: #DBFECF;}
body {margin-top: 0px;margin-bottom: 0px;}
</style>
</head>
<body>
<div id="layer">
<div id="left">宽度为200</div>
<div id="conter">宽度为460</div>
<div id="right">宽度为100</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{margin-right:auto;margin-left:auto;font-size:12px;}
#layer {height: auto;width: 760px;height:600px;}
#left {float: left;height: auto;width: 200px;height:600px;background-color:#DAF4FE;}
#conter {float: left;height: 600px;width: 460px;background-color:#FDF1C1;}
#right {float: left;height: 600px;width: 100px;}
#right {background-color: #DBFECF;}
body {margin-top: 0px;margin-bottom: 0px;}
</style>
</head>
<body>
<div id="layer">
<div id="left">宽度为200</div>
<div id="conter">宽度为460</div>
<div id="right">宽度为100</div>
</div>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询