双飞翼布局
Posted yxs1530
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了双飞翼布局相关的知识,希望对你有一定的参考价值。
听说双飞翼布局是玉伯大大提出来的,始于淘宝UED
如果把三栏布局比作一只大鸟,可以把main看成是鸟的身体,sub和extra则是鸟的翅膀。这个布局的实现思路是,先把最重要的身体部分放好,然后再将翅膀移动到适当的地方.
其实跟上边的圣杯布局差不多的,当然也可以改动一下(自己想想有哪些不同吧)
恩,这里有一只鸟~
左翅sub有200px,右翅extra..220px.. 身体main自适应未知
1.html代码中,main要放最前边,sub extra
2.将main sub extra 都float:left
3.将main占满 width:100%
4.此时main占满了,所以要把sub拉到最左边,使用margin-left:-100% 同理 extra使用margin-left:-220px
(这时可以直接继续上边圣杯布局的步骤,也可以有所改动)
5.main内容被覆盖了吧,除了使用外围的padding,还可以考虑使用margin。
给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px
6.main正确展示
代码敬上:
<html> <head> <meta charset="utf-8"> <title>双飞翼布局</title> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .sub, .main, .extra{ float: left; min-height: 130px; } .sub{ margin-left: -100%; width: 200px; background: red; } .extra{ margin-left: -220px; width: 220px; background: blue; } .main{ width: 100%; } .main-inner{ margin-left: 200px; margin-right: 220px; min-height: 130px; background: green; word-break: break-all; } .footer{ clear: both; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="main"> <div class="main-inner"> <h4>main</h4> <p>main</p> </div> </div> <div class="sub"> <h4>sub</h4> <p>sub</p> </div> <div class="extra"> <h4>extra</h4> <p>extra</p> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
header
main
main
sub
sub
extra
extra
以上是关于双飞翼布局的主要内容,如果未能解决你的问题,请参考以下文章