在日常布局中，无论是两栏布局还是三栏布局，使用的频率非常高

  • 两栏布局：将页面分割成左右宽度不等的两列，宽度较小的列设为固定宽度，剩余宽度由另一列撑满

  • 三栏布局：按照左中右的顺序进行排列，通常中间最宽、左右两列次之。

    一、两栏布局

    两栏布局较为常见，往往是以一个定宽栏和一个自适应栏并排展示。
    实现思路如下：

  • 使用float左浮动左边栏

  • 右边模块使用margin-left撑出内容做内容展示

  • 为父级元素添加BFC，防止下方元素飞到上方内容

    1. <style>
    2.   .box{
    3.       overflow: hidden; /*添加BFC*/
    4.   }
    5.   .left {
    6.       float: left;
    7.       width: 200px;
    8.       background-color: gray;
    9.       height: 400px;
    10.   }
    11.   .right {
    12.       margin-left: 210px;
    13.       background-color: lightgray;
    14.       height: 200px;
    15.   }
    16. </style>
    17. <div class="box">
    18.   <div class="left">左边</div>
    19.   <div class="right">右边</div>
    20. </div>

    还有一种更为简单的使用：flex弹性布局

    flex弹性布局

    1. <style>
    2.   .box{
    3.       display: flex;
    4.   }
    5.   .left {
    6.       width: 100px;
    7.   }
    8.   .right {
    9.       flex: 1;
    10.   }
    11. </style>
    12. <div class="box">
    13.   <div class="left">左边</div>
    14.   <div class="right">右边</div>
    15. </div>

    flex可以说是最好的方案了，代码少，使用简单。
    值得注意的是，flex容器的一个默认属性值：align-items: stretch;，这个属性导致了列等高的效果，为了让两个盒子高度自动，需要设置align-iitem: flex-start

    二、三栏布局

    实现三栏布局中间自适应的布局方式有：

  • 两边使用 float，中间使用 margin

  • 两边使用 absolute，中间使用 margin
  • 两边使用 float 和负 margin
  • display 实现
  • flex实现

  • grid实现

    两边使用 float，中间使用 margin

    需要将中间的内容放在html结构的最后，否则右侧会出现在中间内容的下方

    1. <style>
    2.   .wrap {
    3.       background: #eee;
    4.       overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
    5.       padding: 20px;
    6.       height: 200px;
    7.   }
    8.   .left {
    9.       width: 200px;
    10.       height: 200px;
    11.       float: left;
    12.       background: coral;
    13.   }
    14.   .right {
    15.       width: 120px;
    16.       height: 200px;
    17.       float: right;
    18.       background: lightblue;
    19.   }
    20.   .middle {
    21.       margin-left: 220px;
    22.       height: 200px;
    23.       background: lightpink;
    24.       margin-right: 140px;
    25.   }
    26. </style>
    27. <div class="wrap">
    28.   <div class="left">左侧</div>
    29.   <div class="right">右侧</div>
    30.   <div class="middle">中间</div>
    31. </div>

    原理如下：

  • 两边固定宽度，中间宽度自适应

  • 利用中间元素的margin值控制两边的间距
  • 宽度小于左右部分宽度之和，右侧部分会被挤下去

这种实现方式存在缺陷：

  • 主体内容是最后加载的

  • 右边在主体内容之前，如果是响应式设计，不能简单的换行展示

    两边使用 absolute，中间使用 margin

    基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序. ```javascript

左边固定宽度
右边固定宽度
中间自适应

  1. 实现流程：
  3. - 左右两边使用绝对定位，固定在两侧
  4. - 中间占满一行，但通过 margin 和 左右两边流出 10px 的间隙
  5. <a name="pS5gQ"></a>
  6. ### 两边使用 float 和负 margin
  7. ```javascript
  8. <style>
  9.   .left,
  10.   .right,
  11.   .main {
  12.     height: 200px;
  13.     line-height: 200px;
  14.     text-align: center;
  15.   }
  17.   .main-wrapper {
  18.     float: left;
  19.     width: 100%;
  20.   }
  22.   .main {
  23.     margin: 0 110px;
  24.     background: black;
  25.     color: white;
  26.   }
  28.   .left,
  29.   .right {
  30.     float: left;
  31.     width: 100px;
  32.     margin-left: -100%;
  33.     background: green;
  34.    }
  35.   .right {
  36.     margin-left: -100px; /* 同自身宽度 */
  37.    }
  38. </style>
  40. <div class="main-wrapper">
  41.   <div class="main">中间自适应</div>
  42. </div>
  43. <div class="left">左边固定宽度</div>
  44. <div class="right">右边固定宽度</div>

实现过程：

  • 中间使用了双层标签，外层是浮动的，以便左中右能在同一行展示
  • 左边通过使用负 margin-left:-100%，相当于中间的宽度，所以向上偏移到左侧
  • 右边通过使用负 margin-left:-100px，相当于自身宽度，所以向上偏移到最右侧

缺点：

  • 增加了 .main-wrapper 一层，结构变复杂

  • 使用负 margin，调试也相对麻烦

    使用 display: table 实现

    <table>标签用于展示行列数据，不适合用于布局。但是可以使用diplay: table来实现布局的效果。

    1. <style>
    2. .container {
    3.   height: 200px;
    4.   line-height: 200px;
    5.   text-align: center;
    6.   display: table;
    7.   table-layout: fixed;
    8.   width: 100%;
    9. }
    11. .left,
    12. .right,
    13. .main {
    14.   display: table-cell;
    15. }
    17. .left,
    18. .right {
    19.   width: 100px;
    20.   background: green;
    21. }
    23. .main {
    24.   background: black;
    25.   color: white;
    26.   width: 100%;
    27. }
    28. </style>
    29. <div class="container">
    30. <div class="left">左边固定宽度</div>
    31. <div class="main">中间自适应</div>
    32. <div class="right">右边固定宽度</div>
    33. </div>

    实现原理：

  • 最外层通过设置display: table设置为表格，设置table-layout: fixed表示列宽由自身宽度决定

  • 内层的左中右通过display: table-cell设置为表格单元

  • 左右设置固定宽度，中间设置width: 100%填充剩下的宽度

    使用flex实现

    1. <style type="text/css">
    2.   .wrap {
    3.       display: flex;
    4.       justify-content: space-between;
    5.   }
    7.   .left,
    8.   .right,
    9.   .middle {
    10.       height: 100px;
    11.   }
    13.   .left {
    14.       width: 200px;
    15.       background: coral;
    16.   }
    18.   .right {
    19.       width: 120px;
    20.       background: lightblue;
    21.   }
    23.   .middle {
    24.       background: #555;
    25.       width: 100%;
    26.       margin: 0 20px;
    27.   }
    28. </style>

    实现过程：

  • 仅需将容器设置为display:flex;，

  • 盒内元素两端对称，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
  • 盒内元素的高度撑开容器的高度

优点：

  • 结构简单直观

  • 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

    grid网格布局

    1. <style>
    2.   .wrap {
    3.       display: grid;
    4.       width: 100%;
    5.       grid-template-columns: 300px auto 300px;
    6.   }
    8.   .left,
    9.   .right,
    10.   .middle {
    11.       height: 100px;
    12.   }
    14.   .left {
    15.       background: coral;
    16.   }
    18.   .right {
    19.       background: lightblue;
    20.   }
    22.   .middle {
    23.       background: #555;
    24.   }
    25. </style>
    26. <div class="wrap">
    27.   <div class="left">左侧</div>
    28.   <div class="middle">中间</div>
    29.   <div class="right">右侧</div>
    30. </div>

    与flex布局一样简单