三栏布局-两边固定，中间自适应，中间层优先显示

最新推荐文章于 2021-12-15 11:39:09 发布

weixin_30906671

最新推荐文章于 2021-12-15 11:39:09 发布

阅读量101

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/NNUF/archive/2011/11/23/2260283.html

版权

<!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=utf-8" />
<title>三栏布局-浮动方法</title>
<style type="text/css">
* { margin:0; padding:0;}
#wrap { padding:0 300px 0 200px; *overflow:hidden;}
#main { float:left; width:100%;}
#left, #right { position:relative; _display:inline;}
#left { width:200px; float:left; margin-left:-100%; right:200px; _right:-300px;}
#right { width:300px; float:right; margin-right:-300px;}
</style>
</head>
<body>
<div id="wrap">
 <div id="main">
 <p style="height:999px; background:#fffaba; ">content</p>
 </div>

 <div id="left">
 <p style="height:999px; background:#8fc41f;">left</p>
 </div>
 <div id="right">
 <p style="height:999px; background:#00b7ef;">right2</p>
 </div>
</div>
</body>
</html>