圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

    圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部 float 浮动，但左右两栏加上负 margin 让其跟中间栏 div 并排，以形成三栏布局。

    不同在于解决” 中间栏 div 内容不被遮挡 “问题的思路不一样：

    圣杯布局，为了中间 div 内容不被遮挡，将中间 div 设置了左右 padding-left 和 padding-right 后，将左右两个 div 用相对布局 position: relative 并分别配合 right 和 left 属性，以便左右两栏 div 移动后不遮挡中间 div。

    双飞翼布局，为了中间 div 内容不被遮挡，直接在中间 div 内部创建子 div 用于放置内容，在该子 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。
    多了 1 个 div，少用大致 4 个 css 属性（圣杯布局中间 divpadding-left 和 padding-right 这 2 个属性，加上左右两个 div 用相对布局 position: relative 及对应的 right 和 left 共 4 个属性，一共 6 个；而双飞翼布局子 div 里用 margin-left 和 margin-right 共 2 个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

    简单说起来就是”双飞翼布局比圣杯布局多创建了一个 div，但不用相对布局了 “，而不是你题目中说的” 去掉 relative” 就是双飞翼布局“。 最终界面是一样的：

    布局中间要突出显示 - 图1

    对比图：

    布局中间要突出显示 - 图2

    下面直接上代码：

    圣杯布局：

    1. <body>
    2. <div>header</div>
    3. <div>
    4.   <div>middle</div>
    5.   <div>left</div>
    6.   <div>right</div>
    7. </div>
    8. <div>footer</div>
    9. </body>
    13. <style>
    14. #hd{
    15.     height:50px;
    16.     background: #666;
    17.     text-align: center;
    18. }
    19. #bd{
    20.     /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    21.     padding:0 200px 0 180px;
    22.     height:100px;
    23. }
    24. #middle{
    25.     float:left;
    26.     width:100%;/*左栏上去到第一行*/
    27.     height:100px;
    28.     background:blue;
    29. }
    30. #left{
    31.     float:left;
    32.     width:180px;
    33.     height:100px;
    34.     margin-left:-100%;
    35.     background:#0c9;
    36.     /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    37.     position:relative;
    38.     left:-180px;
    39. }
    40. #right{
    41.     float:left;
    42.     width:200px;
    43.     height:100px;
    44.     margin-left:-200px;
    45.     background:#0c9;
    46.     /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    47.     position:relative;
    48.     right:-200px;
    49. }
    50. #footer{
    51.     height:50px;
    52.     background: #666;
    53.     text-align: center;
    54. }
    55. </style>

    双飞翼布局：

    1. <body>
    2. <div>header</div> 
    3.   <div>
    4.     <div>middle</div>
    5.   </div>
    6.   <div>left</div>
    7.   <div>right</div>
    8.   <div>footer</div>
    9. </body>
    11. <style>
    12. #hd{
    13.     height:50px;
    14.     background: #666;
    15.     text-align: center;
    16. }
    17. #middle{
    18.     float:left;
    19.     width:100%;/*左栏上去到第一行*/     
    20.     height:100px;
    21.     background:blue;
    22. }
    23. #left{
    24.     float:left;
    25.     width:180px;
    26.     height:100px;
    27.     margin-left:-100%;
    28.     background:#0c9;
    29. }
    30. #right{
    31.     float:left;
    32.     width:200px;
    33.     height:100px;
    34.     margin-left:-200px;
    35.     background:#0c9;
    36. }
    38. /*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
    39. #inside{
    40.     margin:0 200px 0 180px;
    41.     height:100px;
    42. }
    43. #footer{  
    44.    clear:both; /*记得清楚浮动*/  
    45.    height:50px;     
    46.    background: #666;    
    47.    text-align: center; 
    48. } 
    49. </style>
    1. <body>
    2. <style type="text/css">
    3.     body{margin:0; padding:0;}
    4.     .boxA{width:180px;background: #CD0000 }
    5.     .boxB{width:600px;background: #9ACD32}
    6.     .boxC{width:180px;background: #87CEFF}
    7.     .box{ height: 300px; float: left;}
    9.     /*ABC*/
    10.     /*.boxA{position: relative;left:-960px;}
    11.     .boxB{margin-left:180px;}*/
    13.     /*CBA*/
    14.     .container{ padding: 0 180px;}
    15.     .boxB{width: 100%; text-align: right;}
    16.     .boxC{position: relative;margin-left: -180px;left:-100%;}
    17.     .boxA{position: relative;margin-left: -180px;right:-180px;}
    19.     /*BAC*/
    20.     /*.boxC{float:right;}
    21.     .container{width: 960px;}*/
    22. </style>
    23. <p>现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度100%），不能使用针对浏览器的CSS Hack.</p>
    24. <div>
    25.     <div>B</div>
    26.     <div>C</div>
    27.     <div>A</div>
    28. </div>
    29. </body>