圣杯布局与双飞翼布局

本篇文章将从各个方面来介绍圣杯布局和双飞翼布局，看完这篇文章大家对这两个布局应该就会很明白了。

<div class="con">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

<div class="con">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

两种布局的来源

圣杯布局来源于2006年发布在a list part上的一篇文章（附上网址http://alistapart.com/article/holygrail ）

双飞翼布局来源于淘宝UED

2. 两种布局的异同点

相同点：圣杯布局和双飞翼布局都是要达到两边宽度固定，中间宽度自适应，并且中间先进行渲染。它们的核心都是利用 float,negative margin,relative position进行拼接，从而实现想要的布局效果。

不同点：圣杯布局的核心思想是使用相对定位来解决main被左右两边遮盖的问题，这个方法会使用较多的标签；而双飞翼布局的核心思想是在main里面再设置一个div来解决main被左右两边遮盖的问题，这个方法需要的标签相对较少。所以也可以说双飞翼布局是圣杯布局的改良版，但是这两个布局的基本步骤类似。

ps：看到这里看不太懂没有关系，这只是一个小总结，真正的干货还在后面呢！

3. 实现两种布局的具体步骤

<1>圣杯布局

HTML代码（这是它的骨骼）
<div class="con">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
</div>
CSS代码（这是它的第一层皮肤）
*{
           margin: 0px;
           padding: 0px;
       }

       .con{
           padding: 0px 220px 0px 200px;
       }

       .left,.main,.right{
           min-height: 300px;/*设置最小的高度为300px*/
           float: left;/*设置为左浮动是因为要使三个模块在一行中出现*/
       }

       .main{
           width: 100%;/*圣杯布局要求中间的模块是自适应的*/
           background: pink;        
       }

       .left{
           width: 200px;/*要和con中的padding设置的宽度一致，不然会产生缝隙*/
           background: #777;
       }

       .right{
           width: 220px;
           background: darkorchid;
 }
效果图：

我们可以看到，由于左浮动，本应该在left下方的right跑到了left的右边；由于设置了con的左右内边距，而main的宽度又是100%，所以第一行已经被占满，这时我们要考虑的就是怎么将left和right弄到和main同一行上，那就再加一层皮肤：

CSS代码（这是它的第二层皮肤）
.left{
           width: 200px;/*要和con中的padding设置的宽度一致，不然会产生缝隙*/
           background: #777;
           margin-left: -100%;
       }

.right{
           width: 220px;
           background: darkorchid;
           margin-left: -220px;
       }
可以看到我在原来的基础上添加了两个margin-left取负边距的语句，这里比较难理解，但也是圣杯布局的核心之一。对于left模块，margin-left取-100%时，相当于将left模块从第二行向上移一个main的宽度，使left的左边和main的左边对齐；对于margin-right模块，由于left模块已经上升到与main同行，所以right就会占据left原来的位置，给right设置margin-left:-220px，可以使right从第二行移到第一行，右边与main的右边对齐，具体效果如下图：

大家可以看到left和right其实是将main的一部分遮住了的，所以我们要想办法将left再左移，将right再右移，这个时候就需要浮动的好朋友定位了，由于相对自己的定位，所以取position为relative，由规则可知，如果要将left相对自己左移，可采用left:-200px或者right:200px，如果这个不太懂可以看看的那篇关于定位的文章。同理，right就要设置left:220px或者right:-220px.这样就要加第三层皮肤了。

CSS代码（这是它的第三层皮肤）
.left,.main,.right{
           min-height: 300px;/*设置最小的高度为300px*/
           float: left;/*设置为左浮动是因为要使三个模块在一行中出现*/
           position: relative;/*设置相对定位*/
       }

.main{
           width: 100%;/*圣杯布局要求中间的模块是自适应的*/
           background: pink;        
       }

.left{
           width: 200px;/*要和con中的padding设置的宽度一致，不然会产生缝隙*/
           background: #777;
           margin-left: -100%;
           left: -200px;/*将left向左移动200px*/
       }

.right{
           width: 220px;
           background: darkorchid;
           margin-left: -220px;
           right: -220px;/*将right向右移动220px*/
       }
具体效果如下，这也是我们所期待的

小结：圣杯布局有三个要点，一是左浮动以及父元素要设置内边距；二是通过设置负边距让left和right上移；三是将left和right分别向左右移.

<2>双飞翼边距

HTML代码（这是它的骨骼）
<div class="main">
        <div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
CSS代码（这是它的第一层皮肤）
.main {
            width: 100%;
            float: left;
        }

.main-inner {
            background: pink;
            margin-left: 200px;
            margin-right: 220px;
            min-height: 300px;
        }

.left {
            width: 200px;
            background: #777;
            float: left;
            min-height: 300px;
        }

.right {
            width: 220px;
            background: darkorchid;
            float: left;
            min-height: 300px;
        }
这里需要注意的一点是，双飞翼布局和圣杯布局最大的区别就是双飞翼布局在main-inner的外面还套了一层main，设置main的宽度为100%，main-inner设置左右外边距的值分别为200px,220px，正好是left和right的宽度，这里省略了相对定位，只需要结合浮动以及外边距的设置就可以实现要求，第一层效果如下：

看了前面的圣杯布局就很好理解，也知道怎么做了，现在只需要将left和right移到和main在一行即可，这样就要我们的负外边距出场了，具体做法如下：

CSS代码（这是它的第二层皮肤）
.main {
            width: 100%;
            float: left;
        }

.main-inner {
            background: pink;
            margin-left: 200px;
            margin-right: 220px;
            min-height: 300px;
        }

.left {
            width: 200px;
            background: #777;
            margin-left:-100%;
            float: left;
            min-height: 300px;
        }

.right {
            width: 220px;
            background: darkorchid;
            margin-left: -220px;
            float: left;
            min-height: 300px;
        }
这样就能实现最后的效果了

小结：双飞翼布局需要注意一下三点，一是要在中间模块的外面包裹一个父元素，这样才能控制宽度；二是要为中间模块设置合适的外边距，要与left和right的宽度相同；三是要利用负边距把left和right移到和main同一行上。

圣杯布局与双飞翼布局

猜你喜欢