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

最新推荐文章于 2024-08-24 21:17:20 发布

转载最新推荐文章于 2024-08-24 21:17:20 发布 · 765 阅读

WEB 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种实现网页左右布局的方法：左栏自适应宽度并居左显示，右栏固定宽度并居右显示。通过CSS样式设置，使布局能够适应不同尺寸的浏览器窗口。

左栏设置宽度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>