即左右模块固定宽度，中间模块随浏览器变化自适应
image.png

Flex

  1. <style>
  2.   .container {
  3.     display: flex;
  4.     height: 200px;
  5.   }
  6.   .left, .right {
  7.     width: 200px;
  8.     background-color: red;
  9.     height: 100%;
  10.   }
  11.   .main {
  12.     background-color: yellow;
  13.     flex: 1;
  14.   }
  16. </style>
  18. <div class="container">
  19.     <div class="main"></div> main
  20.     <div class="left"></div>
  21.     <div class="right"></div>
  22. </div>

https://code.h5jun.com/quha/2/edit?html,css,output

绝对定位

  1. <style>
  2.   .container {
  3.     position: relative;
  4.   }
  5.   .main {
  6.     height: 200px;
  7.     margin: 0 120px;
  8.     background-color: yellow;
  9.   }
  10.   .left {
  11.     position: absolute;
  12.     width: 100px;
  13.     height: 200px;
  14.     left: 0;
  15.     top: 0;
  16.     background-color: red;
  17.   }
  18.   .right {
  19.     position: absolute;
  20.     width: 100px;
  21.     height: 200px;
  22.     background-color: green;
  23.     right: 0;
  24.     top: 0;
  25.   }
  26. </style>
  28. <div class="container">
  29.     <div class="main"></div> main
  30.     <div class="left"></div>
  31.     <div class="right"></div>
  32. </div>

https://code.h5jun.com/qiri/edit?html,css,output

简单实用，并且主要内容可以优先加载。

Float

  1. <style>
  2.     .left {
  3.         float: left;
  4.         height: 200px;
  5.         width: 100px;
  6.         background-color: red;
  7.     }
  8.     .right {
  9.         width: 200px;
  10.         height: 200px;
  11.         background-color: blue;
  12.         float: right;
  13.     }
  14.     .main {
  15.         margin-left: 120px;
  16.         margin-right: 220px;
  17.         height: 200px;
  18.         background-color: green;
  19.     }
  20. </style>
  22. <div class="container">
  23.    <div class="left"></div>
  24.    <div class="right"></div>
  25.    <div class="main"></div> 
  26. </div>

https://code.h5jun.com/soji/edit?html,css,output
左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。
缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。
因为main不能在left right 之前渲染

BFC

  1. <style>
  2.     .left {
  3.         float: left;
  4.         height: 200px;
  5.         width: 100px;
  6.         background-color: red;
  7.     }
  8.     .right {
  9.         width: 100px;
  10.         height: 200px;
  11.         background-color: blue;
  12.         float: right;
  13.     }
  14.     .main {
  15.         overflow: hidden;
  16.         height: 200px;
  17.         background-color: green;
  18.     }
  19. </style>
  21. <div class="container">
  22.    <div class="left"></div>
  23.    <div class="right"></div>
  24.    <div class="main"></div>
  25. </div>

https://code.h5jun.com/foyec/1/edit?html,css,output
主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。

双飞翼

思路：

  • 左、中、右div 左浮动
  • 中div设置一个子div 并设置左右margin（=左右div宽度）
  • 左div 的margin-left 设置-100%
  • 右div 的margin-left :设置负的右margin ```html 
  1. [https://code.h5jun.com/xavug/edit?html,css,output](https://code.h5jun.com/xavug/edit?html,css,output)
  2. <a name="IVMs7"></a>
  3. # 圣杯
  4. 思路
  6. - 左、中、右div 左浮动
  7. - 外div设置左右padding（=左右div宽度）
  8. - 左div 的 margin-left 设置-100%
  9. - 右div 的  margin-right:设置负的自身宽度
  10. - 设置相对定位，左移
  11. ```html
  12.  <style>
  13. .container {
  14.     padding-left: 50px;
  15.     padding-right: 60px;
  16. }
  18. .main {
  19.         float: left;
  20.         width: 100%;
  21.         height: 300px;
  22.         background-color: red;
  24. }
  26. .left {
  27.         float: left;
  28.         width: 50px;
  29.         height: 300px;
  30.         background-color: blue;
  31.       margin-left:-100%; //向左移动main的宽度100%
  32.       position:relative;
  33.       right:50px; 相对自身
  35. }
  37. .right {
  38.         float: left;
  39.         width: 60px;
  40.         height: 300px;
  41.         background-color: green;
  42.       margin-right:-60px; //让外界看来没有宽度
  44. }
  46. header {
  47.     background: black;
  48. }
  50. footer {
  51.     clear: both;
  52.     background: black;
  53.  }
  57. </style>
  58. <header>header</header>
  59. <div class="container">
  60.     <div class="main">main</div>
  61.     <div class="left">left</div>
  62.     <div class="right">right</div>
  63. </div>
  64. <footer>footer</footer>

https://code.h5jun.com/jocow/edit?html,css,output

不同在于解决”中间栏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属性（圣杯布局中间div padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。

  • 简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了


链接：https://www.zhihu.com/question/21504052/answer/50053054

https://www.jianshu.com/p/81ef7e7094e8