三栏布局的几种方式

这里介绍几种三栏布局的实现方式，最终目的都是左右两边固定宽度，中间的自适应。

最终效果如下：

6、绝对定位三栏布局

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位三栏布局</title>
  <style>
    * {
      margin: 0;
    }
    div.wrap {
      position: relative;
    }
    div.main {
      height: 400px;
      margin: 10px 210px 0 310px;
      background: blue;
    }
    div.left {
      position: absolute;
       300px;
      height: 400px;
      top: 0;
      left: 0;
      background: pink;
    }
    div.right {
      position: absolute;
       200px;
      height: 400px;
      top: 0;
      right: 0;
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
</html>

优点：简单。

缺点：完美！