前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

订阅儿

前端集合 RSS订阅
Home » 前端集合 » 3栏自适应布局的2种方法

3栏自适应布局的2种方法

发布者:前端集合 // 发布时间:2012-03-22 09:19:00 // 分类:前端集合 // 访问: 899 次 // 热度: 0人参与

最近经常碰到这个, 所以在博客上作个笔记:

1. position方法

Demo请查看这里

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

html, body, #left, #center, #right{height:100%;}
#left, #right{width:200px; position:absolute;}
#left{top:0; left:0; background-color:red;}
#right{top:0; right:0; background-color:black;}
#center{margin: 0 205px 0 205px; background-color:blue;}

2. float方法

Demo请查看这里

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

html, body, #left, #center, #right{height:100%;}
#left, #right{width:200px;}
#left{float:left; background-color:red;}
#right{float:right; background-color:black;}
#center{margin: 0 205px 0 205px; background-color:blue;}

Tags: CSS, html, 3栏自适应布局, 布局, 自适应布局, 自适应

新工作, 新环境, 新起点>>  << 入手kindle 4
Top