双栏布局

双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在
实现思路也非常的简单：

  • 使用 float 左浮左边栏
  • 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素飞到上方内容 ```html

左边
右边

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

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

三栏布局

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

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

  • grid网格布局

    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值控制两边的间距
  • 宽度小于左右部分宽度之和时，右侧部分会被挤下去

这种实现方式存在缺陷：

  • 主体内容是最后加载的。

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

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

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

实现过程：

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

缺点：

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

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

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

  1. 实现原理：
  3. - 层通过 display: table设置为表格，设置 table-layout: fixed`表示列宽自身宽度决定，而不是自动计算。
  4. - 内层的左中右通过 display: table-cell设置为表格单元。
  5. - 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度
  6. ```html
  7. <style type="text/css">
  8.     .wrap {
  9.         display: flex;
  10.         justify-content: space-between;
  11.     }
  13.     .left,
  14.     .right,
  15.     .middle {
  16.         height: 100px;
  17.     }
  19.     .left {
  20.         width: 200px;
  21.         background: coral;
  22.     }
  24.     .right {
  25.         width: 120px;
  26.         background: lightblue;
  27.     }
  29.     .middle {
  30.         background: #555;
  31.         width: 100%;
  32.         margin: 0 20px;
  33.     }
  34. </style>
  35. <div class="wrap">
  36.     <div class="left">左侧</div>
  37.     <div class="middle">中间</div>
  38.     <div class="right">右侧</div>
  39. </div>

实现过程：

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

优点：

  • 结构简单直观

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

    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.       width: 300px;
    20.       background: lightblue;
    21.   }
    23.   .middle {
    24.       background: #555;
    25.   }
    26. </style>
    27. <div class="wrap">
    28.   <div class="left">左侧</div>
    29.   <div class="middle">中间</div>
    30.   <div class="right">右侧</div>
    31. </div>