双飞翼布局和圣杯布局都属于三列布局的经典布局
    双飞翼布局是由淘宝团队发明的，圣杯布局是外国人发明的，两者效果类似，但是实现方法不同，具体效果如下：
    1-4、双飞翼布局和圣杯布局的区别是什么？ - 图1

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="utf-8" />
    5.     <title>圣杯布局</title>
    6.     <style> 
    7.       #bd{
    8.         padding: 0 200px 0 180px;
    9.         height: 100px;
    10.       }
    11.       #middle{
    12.         float: left;
    13.         width: 100%;
    14.         height: 500px;
    15.         background:blue;
    17.       }
    18.       #left{
    19.         float:left;
    20.         width:180px;
    21.         height:500px;
    22.         margin-left:-100%;
    23.         background: #0c9;
    24.         position: relative;
    25.         left: -180px;
    26.       }
    27.       #right{
    28.         float: left;
    29.         width: 200px;
    30.         height: 500px;
    31.         margin-left: -200px;
    32.         background: #0c9;
    33.         position: relative;
    34.         right: -200px;
    35.       }
    37.     </style>
    38.   </head>
    39.   <body>
    40.     <div id="bd">
    41.       <div id="middle">middle</div>
    42.       <div id="left">left</div>
    43.       <div id="right">right</div>
    44.     </div>
    45.   </body>
    46. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>双飞翼布局</title>
    6.     <style>
    7.       #center {
    8.         float: left;
    9.         width: 100%; /*左栏上去到第一行*/
    10.         height: 100px;
    11.         background: blue;
    12.       }
    13.       #left {
    14.         float: left;
    15.         width: 180px;
    16.         height: 100px;
    17.         margin-left: -100%;
    18.         background: #0c9;
    19.       }
    20.       #right {
    21.         float: left;
    22.         width: 200px;
    23.         height: 100px;
    24.         margin-left: -200px;
    25.         background: #0c9;
    26.       }
    28.       /*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
    29.       #inside {
    30.         margin: 0 200px 0 180px;
    31.         height: 100px;
    32.       }
    33.     </style>
    34.   </head>
    35.   <body>
    36.     <div id="center">
    37.       <div id="inside">middle</div>
    38.     </div>
    39.     <div id="left">left</div>
    40.     <div id="right">right</div>
    41.   </body>
    42. </html>