流动布局
了解定宽布局之后,我尝试把这个方法用到动态布局中去。边栏仍然需要设置固定宽,很多浏览器不支持border:**%的属性。但是我门可以使中间栏目自适应。
CSS: #container{ background-color:#0ff; overflow:hidden; margin:0 100px; padding-right:150px; /* The width of the rail */ } * html #container{ height:1%; /* So IE plays nice */ } #content{ background-color:#0ff; width:100%; border-right:150px solid #f00; margin-right:-150px; float:left; } #rail{ background-color:#f00; width:150px; float:left; margin-right:-150px; }
3个栏目自适应布局 方法简单,不需要引用图片,没有BUG.
HTML:
<div id="container"> <div id="center">Center Column Content</div> <div id="leftRail">Left<br /> Sidebar</div> <div id="rightRail">Right Sidebar</div> </div>
CSS:
body{ margin:0 100px; padding:0 200px 0 150px; } #container{ background-color:#0ff; float:left; width:100%; border-left:150px solid #0f0; border-right:200px solid #f00; margin-left:-150px; margin-right:-200px; display:inline; /* So IE plays nice */ } #leftRail{ float:left; width:150px; margin-left:-150px; position:relative; } #center{ float:left; width:100%; margin-right:-100%; } #rightRail{ float:right; width:200px; margin-right:-200px; position:relative; }
效果:
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
经典论坛讨论: http://bbs.blueidea.com/thread-2730321-1-1.html
本文链接:http://www.blueidea.com/tech/web/2007/4554.asp
出处:蓝色理想
责任编辑:moby
上一页 垂直三栏布局拥有相同高度的方法 [1] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|