本文已参与「新人创作礼」活动，一起开启掘金创作之路

引言

圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。

本文主要记录了双飞翼布局的结构和样式，以及两种布局的总结。

双飞翼布局

双飞翼布局DOM结构

    <header>this is the header</header>
    <main>
        <div class="middle">
            <div class="center">
                双飞翼布局
            </div>
        </div>
        <div class="left">this is the left</div>
        <div class="right">this is the right</div>
    </main>
    <footer>this is the footer</footer>

main包含三个div标签，class分别为middle、left、right。其中middle包含一个class为center的div标签（和圣杯布局一样，为了确保middle区域优先渲染，将middle放在left、right之上）

双飞翼布局样式

第一步，给middle中的center，设置margin为左右两栏留出空间。（为了页面效果，也为其他区域添加了宽高以及背景颜色）

        .center{
            margin: 0 200px;  //现在最重要的是理解这一行代码
            height: 200px;
            background: red;
        }
        //下面是其他区域的样式，不用细看，了解即可
        main{
            background: purple;  //背景颜色：紫色
            clear: both;
        }
        .left{
            width: 200px;
            height: 200px;
            background: green;
        }
        .right{
            width: 200px;
            height: 200px;
            background: yellow;
        }
        .middle{
            width: 100%;
            height: 200px;
            background: pink;
        }
        .center{
            margin: 0 200px;
            height: 200px;
            background: red;
        }

页面效果：

第二步，同圣杯布局一样，为三栏分别添加 float: left;

修改后的CSS代码如下：

        main{
            background: purple;
            clear: both;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: green;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: yellow;
        }
        .middle{
            float: left;
            width: 100%;
            height: 200px;
            background: pink;
        }
        .center{
            margin: 0 200px;
            height: 200px;
            background: red;
        }

页面效果：

第三步，给left添加 margin-left: -100%;设置左边栏。

修改后的CSS代码如下：

        main{
            background: purple;
            clear: both;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: green;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: yellow;
        }
        .middle{
            float: left;
            width: 100%;
            height: 200px;
            background: pink;
        }
        .center{
            margin: 0 200px;
            height: 200px;
            background: red;
        }

页面效果： 第四步，给right添加 margin-left: -200px;，设置右边栏，完成双飞翼布局。

完整CSS代码：

  		header, footer{
            height: 50px;
            background-color: #ccc;
            clear: both;
        }
        main{
            background: purple;
            clear: both;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: green;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: yellow;
            margin-left: -200px;
        }
        .middle{
            float: left;
            width: 100%;
            height: 200px;
            background: pink;
        }
        .center{
            margin: 0 200px;
            height: 200px;
            background: red;
        }

双飞翼布局最终页面效果：

双飞翼布局总结

• 第一步，给middle中的center，设置margin为左右两栏留出空间；
• 第二步，同圣杯布局一样，给三栏添加浮动；
• 第三步，通过给left添加 margin-left: -100%; 完成左边栏；
• 第四步，通过给right添加 margin-left: -200px;，完成右边栏；

总结

==圣杯布局 、双飞翼布局都使用float布局==

==圣杯布局 、双飞翼布局两侧都使用margin负值==

==为防止中间内容被两侧覆盖，圣杯布局使用的padding，双飞翼布局使用的是margin==

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！