代码改变世界

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

2011-11-23 14:37  VVG  阅读(615)  评论(0)  编辑  收藏  举报 
<!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>

margin-left:-100%;

解释：#warp元素padding设置左右#LEFT #right 的占位，#warp内容区域自动适应浏览器宽度，设置MAIN层的宽度100%，则自适应WARP的内容区块，

此时中间自适应完成，left，right 设置为相对自己原位置定位，在操作margin-left定位到指定位置即可！