本例要介绍的是,固定列被放中间,它的左右各有一列,并按比例适应中宽度。这是一种很少见的布局形式。
这里以固定的1-3-1布局为基础。现在需要在left和right两个div外面分别套一层div,把它们“包裹”起来。
效果图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#header,#content,#footer{ background-color:#ccc; border:1px solid #0ca; height:30px; width:80%; margin:10px auto; }#content{ height:500px; position:relative; }#h{ float:left; width:100%; margin-left:-104px; }#w{ margin-left:104px; position:relative; }#left{ height:500px; background-color:#FF0; border:1px #90F solid; width:100px; float:left; }#midden{ margin-left:100px; height:500px; border:1px blue solid; background-color:#0F0; }#right{ position:absolute; right:0px; top:0px; width:100px; height:500px; border:1px green solid; background-color:#F93; }</style>
</head><body>
<div id="header"></div><div id="content"> <div id="h"> <div id="w"> <div id="left"> </div> <div id="midden"> 拉萨见法拉世界反垃圾是独立房间按时的离开房间拉斯科技福利卡来得及飞拉萨的解放路的时间按法律框架的撒离开房间按时的离开老大撒放家里是卡的房间里打开撒娇法律上的积分上的积分了 </div> </div> </div> <div id="right"> </div></div><div id="footer"></div></body></html>