标签：head height 团队 round center 移动 aaa ice char
由玉伯前辈提出，淘宝团队最开始运用，如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style> body{margin: 0px;} .main{ width: 100%; height: 198px; background-color: #aaa; } .center{ margin-left: 198px; margin-right: 198px; float:left; background-color: #fff; } .left{ margin-left: -100%; float: left; width: 198px; height: 198px; background: red; } .right{ margin-left:-198px; width: 198px; float: left; background-color: green; } </style> <body> <div class="main"> <div class="center">html is very much! html is very much!html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much!</div> <div class="left">html is very much! html is very much! </div> <div class="right">how old are you!how old are you!how old are you!how old are you!how old are you!how old are you!</div> </div> </body> <script> </script> </html>
标签：head height 团队 round center 移动 aaa ice char
原文地址：http://www.cnblogs.com/like-dream/p/7760799.html
