代码改变世界

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

2011-11-23 14:37  VVG  阅读(619)  评论(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定位到指定位置即可!