双飞翼布局是淘宝UED由国外圣杯布局优化而来的经典三栏布局解决方案,具有中栏html结构靠前且宽度自适应,侧栏宽度固定,且允许任何一栏为最高高度等优点。实现原理是先将中栏放好,然后让紧随其后的左右两栏利用margin负值强行挤到合适的位置。技术原理不难理解,但很多人一开始看不懂,因为一直按照css提供的规则去用css,久而久之思路就局限在那些规则上,双飞翼布局也好者圣杯布局也好,这几行代码不难背过,但这种未达目的不择手段的气势却是真正值得好好学习的。
虽然html并不是编程语言,但算法这种东西应该无处不在,生活中也一样,任何事理论上都有最佳算法,随着经验的增加人往往培养出来许多的“固定算法”,俗称思维定势,这些思维定势就像水壶里的水垢,慢慢的拉开水和火的距离。《小王子》也是表达的这个意思,大人的世界充满权利、虚荣、消沉、贪婪、服从,这都是各种病态,眼里再没有地方放下真正重要和正常的东西,人需要社会,社会需要秩序,但秩序的过度发挥无疑会遏制人的主观能动性,而作为一个人,如果不能独立思考,那跟一张桌子有什么区别呢。
下面是完整的双飞翼布局demo:
《!DOCTYPE html>
《html&g t;
《head>
《meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
《title>双飞翼布局《/title>
《style>
body{margin:0;color:#fff;}
.content{width:1000px;margin:0 auto;}
.main2{float:left;width:100%;}
.in{margin:0 230px 0 190px;background:#C0F;}
.left2{float:left;width:190px;margin-left:-100%;background:#03F;}
.right2{float:left;width:230px;margin-left:-230px;background:#63F;}
《/style>
《/head>
《body>
《div>
《div>
《div>
main《br/>c
《/div>
《/div>
《div>
left
《/div>
《div>
right
《/div>
《/div>
《/body>
《/html>