- UID
- 4763
- 帖子
- 18723
- 积分
- 32669
- 阅读权限
- 80
- 注册时间
- 2005-9-5
- 最后登录
- 2015-6-3
- 在线时间
- 13675 小时
|
本帖最后由 Pentium9 于 2014-3-31 21:46 编辑
CSS布局奇淫技巧之-宽度自适应 http://www.cnblogs.com/2050/archive/2012/07/30/2614852.html
css这个东西,说难不难,说容易也不容易。我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里。这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧。
首先讲的是三列布局,左右两列宽度固定,中间一列宽度自适应
这个很好实现,左右两列分别左浮动和右浮动并给一个固定宽度,中间不浮动,也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。
看下代码结构:- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>宽度自适应布局</title>
- <style>
- body,div{ margin:0; padding:0;}
- div{ height:200px; color:#F00;}
- .left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
- .right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
- .center{ background:#333; margin:0 100px; _margin:0 97px;}
- </style>
- </head>
- <body>
- <div class="left">我是left</div>
- <div class="right">我是right</div>
- <div class="center">我是center</div>
- </body>
- </html>
复制代码 |
|