实现CSS三栏自适应布局的5种方法

在PC端，三栏布局可以充分利用屏幕的宽度，展示更多的内容。

三栏布局的实现和双栏类似，在双栏的基础上进行调整即可实现三栏。

CSS实现三栏布局有几种实现方式，以下逐个分析。

目录

1. 两边使用 float，中间使用 margin 

<style>
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    float: left;
    width: 100px;
    background: green;
  }

  .right {
    float: right;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>

<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
<div class="main">中间自适应</div>

尝试一下 »

实例详解

  1. 两边使用 float 固定在左右两侧，留出中间的空白。
  2. 中间占满一行，但通过 margin 和左右两边留出10px的间隔。

优点

  1. 结构清晰，实现较简单。

缺点

  1. 主体内容是最后加载的。
  2. 右边在主体内容之前，如果是响应式设计，不能简单的换行展示。

浏览器兼容性

所有主流浏览器都支持。

2. 两边使用 position: absolute，中间使用 margin 

<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="main">中间自适应</div>
</div>

尝试一下 »

实例详解

  1. 左右两边使用绝对定位，固定在两侧。
  2. 中间占满一行，但通过 margin 和左右两边留出10px的间隔。

优点

  1. 因为左右是绝对定位的，所以左中右三个元素是可以随意更改顺序的。

缺点

  1. 使用了绝对定位，两边内容脱离了文档流。如果中间内容高度低于两边，则出现超出 .container 的情况，需通过JS解决。

浏览器兼容性

所有主流浏览器都支持。

3. 两边使用 float 和负 margin 

<style>
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .main-wrapper {
    float: left;
    width: 100%;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }

  .left,
  .right {
    float: left;
    width: 100px;
    margin-left: -100%;
    background: green;
  }

  .right {
    margin-left: -100px; /* 同自身宽度 */
  }
</style>

<div class="main-wrapper">
  <div class="main">中间自适应</div>
</div>
<div class="left">左边固定宽度</div>
<div class="right">右边固定宽度</div>

尝试一下 »

实例详解

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

优点

  1. 中间一栏排在前面，优先加载。特别是在IE浏览器下打开时，可以明显看到中间一栏先显示出来，接着才显示两边。

缺点

  1. 增加了 .main-wrapper 一层，结构变复杂。
  2. 使用负 margin ，调试也相对麻烦。

关于负 margin 的实现细节，可以打开浏览器的开发者工具，逐步调整 margin-left 的值，从0到-100，通过左右两边的位置变化，进一步了解布局的实现原理。

浏览器兼容性

所有主流浏览器都支持。

4. 使用 display: table 实现

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

<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .left,
  .right,
  .main {
    display: table-cell;
  }

  .left,
  .right {
    width: 100px;
    background: green;
  }

  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

尝试一下 »

实例详解

  1. 外层通过 display: table 设置为表格，设置 table-layout: fixed 表示列宽自身宽度决定，而不是自动计算。
  2. 内层的左中右通过 display: table-cell 设置为表格单元。
  3. 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度。

优点

  1. 结构简单直观。
  2. table作为一个整体结构兼容性好，相比多个div浮动组合更加稳定。

缺点

  1. 内层元素展示为 table-cell, margin会失效，只能在 .container 设置 border-spacing 为所有元素设置间隔，或内部增加一层来设置 margin。

浏览器兼容性

所有主流浏览器都支持。

5. 使用 display: flex 实现

使用 flex 布局可以非常简单的实现三列，多列的效果，唯一要考虑的就是兼容性问题。

<style>
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left,
  .right {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100px;
    flex: 0 0 100px;
    background: green;
  }

  .main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

尝试一下 »

实例详解

  1. 外层容器 .container 通过 display: flex 设置为 flex 布局。
  2. 左右两边设置 flex: 0 0 100px 表示元素不缩小，不扩大，初始宽度为100px，即固定为100px。
  3. 中间设置 flex: 0 0 auto 表示元素按需缩小，扩大，基础宽度自适应，即宽度为总宽度减去2*100px，实现自适应

优点

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

缺点

  1. 需IE10以上才支持。

浏览器兼容性

IE / Edge Chrome Firefox Safari Opera
11
10 -ms-		 20
4 -webkit-		 27
2 -moz-		 6
3.1 -webkit-		 12.1

总结

除以上方法之外，甚至还可以选择两个双栏组合成一个三栏布局。

实现三栏布局的方法各有千秋，可根据实际情况和优缺点进行选择。