左栏自适应，右栏居右宽度不变

最新推荐文章于 2023-01-27 19:23:10 发布

查理001

最新推荐文章于 2023-01-27 19:23:10 发布

阅读量716

点赞数

分类专栏： WEB

WEB 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

左栏设置宽度100%居左，这样就自动适应浏览器的大小。
右栏设定恒定宽度200PX 居右，Margin 设定向左减200PX（margin:0 0 0 -200px; ），这样就能保证在固定在屏幕的右边。
在IE6 FF里都可以良好的执行，IE6中略有不同。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlnshttp://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<<title>左栏自适应，右栏宽度不变居右</title>
<style>
body{margin:0 0 0 0; padding:0 0 0 0; color:#FFFFFF;}
.nav{width:100%; height:150px; background:#00FFFF;}
.main{float:left; width:100%; height:500px; background:#0099CC;}
.menu{float:right; margin:0 0 0 -200px; height:500px; width:200px; background:#00CCFF;}
.content{ margin:5px; background:#CCCCCC; width:700px; height:400px;}
</style>
</head>
<body>
<div class="nav">top</div>
<div class="main"><div class="content">content</div></div>
<div class="menu">right</div>
</body>
</html>