23 圣杯布局和双飞翼布局

1.圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局。
2.其中，中间栏放到文档流前面，保证先行渲染。
解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），
3.而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

image.png

圣杯布局结构

image.png

代码如下

        div{
            font-size: 50px;
            color: #fff;
        }
        #header{
            height: 100px;
            background: rgb(158, 158, 158);
        }
        #wrapper{   
            /* 把左边和右边拉回原来的位置 */
            padding: 0 300px 0 200px;
            overflow: hidden;
        }
        #wrapper div{
            float: left;
            min-height: 300px;
        }
        #wrapper .main{
            width: 100%;
            background: red;
        }
        #wrapper .left{
            position: relative;
            left: -200px;
            margin-left: -100%;
            width: 200px;
            background: blue;
        }
        #wrapper .right{
            position: relative;
            right: -300px;
            margin-left: -300px;
            width: 300px;
            background: #222;
        }
        #footer{
            height: 100px;
            background: rgb(131, 131, 131);
        }

双飞翼布局结构

image.png

代码如下

        .header{
            height: 100px;
            background: #ccc;
        }
        .wrapper{
            float: left;
            width: 100%;/* 中间的上去到第一行 */
            height: 200px;
            background: blue;
        }
        .wrapper .main{
            /* 给内部div添加margin，把内容放到中间栏，其实整个背景还是100% */
            margin: 0 300px 0 200px;
        }
        .left{
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            float: left;
            margin-left: -300px;
            width: 300px;
            height: 200px;
            background: green;
        }
        .footer{
            /* 清除浮动 */
            clear: both;
            height: 100px;
            background: #ddd;
        }