大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是Kevin Cornell在2006年提出的一个布局模型概念，这个在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有以下的几点：
1、三列布局，中间宽度就自适应，目的都是左右两栏固定宽度；
2、在执行代码时候，代码是从上往下执行的。中间栏要在浏览器中优先展示渲染。中间往往是大家最关注的点。
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
参考代码：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>双飞翼或圣杯布局</title><style>*{margin: 0;padding: 0;}#continate{font:18px/30px "微软雅黑"; /*第一个是字体大小 第二 是字体行高 第三 字体**/}/**全局定义三个div高度*/#conter,#left,#right{height: 300px;float: left;}#conter{background: sandybrown;width: 100%;}#left{background: lightblue;width: 30%;margin-left: -100%; /*往上100%就是回到最开始哪里*/}#right{background: cyan;width: 20%;margin-left: -20%;/*往上100%就是回到最开始哪里*/}header,footer{height: 100px;line-height: 100px;text-align: center;background: salmon;clear: both;/*清除浮动，要不然里面的div无法进入 因为里面没有指定height*/}#yingca{padding: 0 20% 0 30%;/*去掉左右的距离，把隐藏的内容显示出来**/}/*示例中增加一个#yingca的目的是因为当left上移时与center重叠了，left覆盖了center，通过yingca的padding将left占用的位置空出。* */</style></head><body><header>one</header><div id="continate"><div id="one"><div id="conter"><div id="yingca">conter</div></div><div id="left">left</div><div id="right">right</div></div></div><footer>footer</footer></body> </html>
菜鸟一枚
