圣杯布局和双飞翼布局

好激动诶，自己也像模像样地开了一个博客，技术讨论的部分也可以从我的小松鼠博客上面放到这了。

一直在往一个优秀的前端上努力。

 

今天就说说这个，刚刚纠结了半天，看代码圣杯布局和双飞翼布局都是三列布局，差不多诶。那到底什么差别呢。

 

《CSS布局终极方案之--圣杯布局（兼容IE6+，现代浏览器）》一文中提到了：

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点： 1、三列布局，中间宽度自适应，两边定宽； 2、中间栏要在浏览器中优先展示渲染； 3、允许任意列的高度最高； 4、要求只用一个额外的DIV标签； 5、要求用最简单的CSS、最少的HACK语句；

那这么说好像就只是本土化的区别了。

《圣杯布局与双飞翼布局的实现思路》一文中把代码部分实现了一下，其实我觉得就该是一样的吧，引用网易nec的布局代码：

 

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>左侧定宽</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中间自适应</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右侧定宽</p>
    </div>
</div>

 

/* 三列中间自适应布局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}

酱紫就是一个奖杯或者飞鸟了。

理解的不对请指正。

慢慢前行ing。