简明现代魔法 -> CSS层叠样式表 -> 三栏自适应布局的CSS设计

三栏自适应布局的CSS设计

2011-02-18

题目:在页面上有三个块,左右块的宽度高度固定,中间块宽度撑满在左右块之间,然后中间块的宽度可以跟着浏览器的变化而变化。

这种设计的好处是可以铺满整个浏览器,不管你使用哪种分辨率。很多网站都在使用这种CSS布局,比如博客园 www.cnblogs.com。

方案一:

<div class="left">左</div>
<div class="right">右</div>
<div class="content">中</div>
.left {float:left;width:300px;height:500px;background:#F00;}
.right {float:right;width:200px;height:500px;background:#00F;}
.content {margin:0 200px 0 300px;height:500px;background:#CCC;}

方案二:

<body>
     <div class="left fl">左</div>
     <div class="body">中</div>
     <div class="right fr">右</div>
</body>
.left,.right{ width:100px; height:200px; position:absolute; background:red; }
.fl{ left:0px; }
.fr{ right:0px; }
.body{ width:100%; position:absolute; left:100px; right:100px; background:#ccc; }
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们