参考链接

几种常见的CSS布局

实现三栏布局的几种方法

干货!各种常见布局实现+知名网站实例分析

Flex 布局教程：实例篇

CSS 常见布局

两列自适应布局

HTML

  1. <div class="parent" style="background-color: lightgrey;">
  2.     <div class="left" style="background-color: lightblue;">
  3.         <p>left</p>
  4.     </div>
  5.     <div class="right"  style="background-color: lightgreen;">
  6.         <p>right</p>
  7.         <p>right</p>
  8.     </div>        
  9. </div>

float + overflow: hidden

  1. .parent {
  2.   overflow: hidden;
  3. }
  4. .left {
  5.   float: left;
  6.   margin-right: 20px;
  7. }
  8. .right {
  9.   overflow: hidden;
  10. }

flex

  1. .parent {
  2.   display:flex;
  3. }  
  4. .right {
  5.   margin-left:20px; 
  6.   flex:1;
  7. }

grid

  1. .parent {
  2.   display:grid;
  3.   grid-template-columns:auto 1fr;
  4.   grid-gap:20px
  5. }

三栏布局

左右两栏固定宽度，中间部分自适应的三栏布局。

CSS 常见布局 - 图1CSS 常见布局 - 图2

圣杯布局

HTML

  1. <main class="container">
  2.     <div class="column center">center</div><!--先渲染,第一行-->
  3.     <div class="column left">left</div>
  4.     <div class="column right">right</div>
  5. </main>

CSS

  1. .container {
  2.     min-width: 200px;
  3.     padding-left: 200px; /*留出左空间*/
  4.     padding-right: 200px; /*留出右空间*/
  5. }
  6. .column{
  7.     float: left; /*同一行*/
  8. }
  9. .center{
  10.     width: 100%; /*中间自适应 左右挤到下一行*/
  11.     height: 300px;
  12.     background: greenyellow;
  13. }
  14. .left,.right{
  15.     width: 200px;
  16.     height: 200px;
  17.     background: yellow;
  18. }
  19. .left {
  20.     margin-left: -100%; /*同一行的开头*/
  21.     position: relative;
  22.     left: -200px; /*左移 避免覆盖中间*/
  23. }
  24. .right {
  25.     margin-left: -200px; /*同一行的末尾*/
  26.     position: relative;
  27.     right: -200px; /*右移 避免覆盖结尾*/
  28. }
  29. /*等高布局*/
  30. .center,
  31. .left,
  32. .right {
  33.     padding-bottom: 10000px; /*扩展background*/
  34.     margin-bottom: -10000px; /*收缩边界*/
  35. }
  36. .container {
  37.     overflow: hidden; /*切割多余部分 且生成内部BFC*/
  38. }

双飞翼布局

HTML

  1. <main class="container">
  2.     <div class="column center">
  3.         <div class="inner">center</div> <!--先渲染,第一行-->
  4.     </div>
  5.     <div class="column left">left</div>
  6.     <div class="column right">right</div>
  7. </main>

CSS

  1. .container {
  2.     min-width: 600px;
  3. }
  4. .column{
  5.     float: left; /*同一行*/
  6. }
  7. .center{
  8.     width: 100%; /*中间自适应 左右挤到下一行*/
  9.     height: 300px;
  10.     background: greenyellow;
  11. }
  12. .left,.right{
  13.     width: 200px;
  14.     height: 200px;
  15.     background: yellow;
  16. }
  17. .center .inner {
  18.     margin: 0 200px; /*左右留出空间, 挤压内部空间*/
  19. }
  20. .left {
  21.     margin-left: -100%; /*移动到同一行左边*/
  22. }
  23. .right {
  24.     margin-left: -200px; /*移动到同一行右边*/
  25. }
  26. /*等高布局*/
  27. .center,
  28. .left,
  29. .right {
  30.     padding-bottom: 10000px; /*扩展background*/
  31.     margin-bottom: -10000px; /*收缩边界*/
  32. }
  33. .container {
  34.     overflow: hidden; /*切割多余部分 且生成内部BFC*/
  35. }

利用 flex

HTML

  1. <div class="HolyGrail">
  2.     <header>header</header>
  3.     <div class="HolyGrail-body">
  4.         <div class="HolyGrail-middle">middle</div>
  5.         <div class="HolyGrail-left">left</div>
  6.         <div class="HolyGrail-right">right</div>
  7.     </div>
  8.     <footer>footer</footer>
  9. </div>

CSS

  1. .HolyGrail {
  2.     width: 1000px;
  3.     height: 500px;
  4.     display: flex;
  5.     flex-direction: column;
  6. }
  7. header, footer {
  8.     height: 100px;
  9.     background-color: dimgrey;
  10. }
  11. .HolyGrail-body {
  12.     display: flex;
  13.     min-height: calc(100% - 200px);
  14. }
  15. .HolyGrail-left {
  16.     order: -1;
  17.     width: 100px;
  18.     word-break: break-word;
  19.     background-color: dodgerblue;
  20. }
  21. .HolyGrail-right {
  22.     width: 100px;
  23.     word-break: break-word;
  24.     background-color: lightseagreen;
  25. }
  26. .HolyGrail-middle {
  27.     flex: 1;
  28.     background-color: orangered;
  29. }

利用 Grid

HTML

  1. <div class="HolyGrail">
  2.     <header>header</header>
  3.     <div class="HolyGrail-body">
  4.         <div class="HolyGrail-middle">middle</div>
  5.         <div class="HolyGrail-left">left</div>
  6.         <div class="HolyGrail-right">right</div>
  7.     </div>
  8.     <footer>footer</footer>
  9. </div>

CSS

  1. .HolyGrail {
  2.     height: 500px;
  3.     display: grid;
  4.     grid-template-rows: auto 1fr auto;
  5. }
  6. header, footer {
  7.     height: 100px;
  8.     background-color: dimgrey;
  9. }
  10. .HolyGrail-body {
  11.     display: grid;
  12.     grid-template-columns: 100px auto 100px;
  13. }
  14. .HolyGrail-left {
  15.     grid-column: 1;
  16.     grid-row: 1;
  17.     background-color: dodgerblue;
  18. }
  19. .HolyGrail-right {
  20.     background-color: lightseagreen;
  21. }
  22. .HolyGrail-middle {
  23.     background-color: orangered;
  24. }