圣杯和双飞翼布局
2015-12-26 18:17
344 查看
//圣杯布局-wrap设置padding/left right加相对定位
//双飞翼布局-在main中嵌套一层设置margin
<!DOCTYPE html> <html lang="zh-CN"> <html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title></title> <style> *{margin:0; padding:0;} .wrap{padding:0 200px; overflow: hidden} .main{width:100%; background:#57ccb1; float:left; height:100px;} .left{ float:left;margin-left:-100%; width:200px; height:100px; background:#ff3f27; position:relative; left:-200px;} .right{ float:left;margin-left:-200px; width:200px; height:100px; background:#fbb800; position:relative;right:-200px;} </style> </head> <body> <div class="wrap"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
//双飞翼布局-在main中嵌套一层设置margin
<!DOCTYPE html> <html lang="zh-CN"> <html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title></title> <style> *{margin:0; padding:0;} .main{width:100%; background:#57ccb1; float:left; height:100px;} .left{ float:left;margin-left:-100%;opacity:0.4; width:200px; height:100px; background:#ff3f27; } .right{ float:left;margin-left:-200px;opacity:0.4; width:200px; height:100px; background:#fbb800; } .main_con{margin-left:200px; margin-right:200px;} </style> </head> <body> <div class="wrap"> <div class="main"> <div class="main_con">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
相关文章推荐
- 贝塞尔曲线
- 多级反向代理下,Java获取请求客户端的真实IP地址多中方法整合
- FFMPEG解码多线程
- JSP标准标签库
- Android-Canvas.save() Canvas.restore() 总结
- Math.xx()
- C++11 并发指南一(C++11 多线程初探)
- 微信内网页某些安卓手机不能上传图片文件的问题(1)
- 从零开始配置MySQL MMM
- Android 动画 —— 属性动画
- 收藏夹
- Bugzilla移植到Apache
- java web基础 --- 图像加载Http请求
- Gz维护手记
- Spring XD: 将数据驱动的联系放到统一的平台上
- iOS支付宝支付--密钥制作
- JAVA常用类之日期处理
- swift之mutating关键字
- 数据结构与算法概述
- C++11 并发指南三(std::mutex 详解)