双飞翼布局和圣杯布局的对比
2016-07-24 10:01
441 查看
在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多,那么有没其他方法更加简洁方便呢?
在淘宝UED探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局。
DOM结构:main内层增加了一个div
样式:去掉了左右栏的相对定位,去掉包裹层padding,以中间栏新增div的margin代替
在淘宝UED探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局。
DOM结构:main内层增加了一个div
<div class="header">Header</div> <div class="bd"> <div class="main"> <div class="inner"> Main </div> </div> <div class="left">Left</div> <div class="right">Right </div> </div> <div class="footer">Footer</div>
样式:去掉了左右栏的相对定位,去掉包裹层padding,以中间栏新增div的margin代替
<style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; /*position: relative;*/ /*left:-150px;*/ } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; /*position:relative;*/ /*right:-190px;*/ } .inner{ margin-left:150px; margin-right:190px; } </style>
相关文章推荐
- CSS3-1
- UVA 12291 Polyomino Composer
- Codeforces 611C New Year and Domino(二维前缀和)
- u-boot.lds 链接脚本分析(hi3515)
- 各个浏览器的内核
- Mesos源码分析(3): Mesos Master的启动之二
- [LEETCODE]52. N-Queens II
- 解决linux系统WIFI无法使用5GHz频率的问题
- 由CP函数认识文件的基本操作
- 【Java】面向对象(二)继承
- Excel Sheet Column Number
- 每天一篇linux教程-----Linux 文件基本属性
- lower_bound()
- 非结构化网格内等值线绘制
- Aaronson hdu5747 解题报告 深剖水题
- JavaScript提高网站性能优化的建议(二)
- C# 枚举尚未开始,或者已经结束
- HDU 5656 CA Loves GCD
- MVC初接触
- 剑指offer 38题 【知识迁移能力】数字在排序数组中出现的次数