CSS经典三栏布局方案（6种方法）

那么我们开始对“CSS经典三栏布局方案（6种方法）”的详细讲解。

什么是经典三栏布局

经典三栏布局通常是指将一个页面分成三列的布局，一般是左右两栏固定宽度，中间一栏自适应的布局结构。这个布局方法是网页布局设计中使用最为广泛的一种布局，相信很多前端工程师都需要掌握。

CSS经典三栏布局方案（6种方法）

前言

下面我们会对6种经典的三栏布局方案进行详细讲解，这些方法有些是经典的应用，有些则是比较新的实现方式，有了这些方法，你将更加熟练地掌握三栏布局的技巧。

方法一：float + margin

这是一种最基础的实现方式，主要利用 float 属性来对元素进行定位，通过 margin 属性来给元素留出空隙。下面是示例代码：

  <div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="main">main</div>
  </div>

  #container {
    overflow: hidden;
    background-color: #EEE;
  }
  #left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #F00;
    margin-right: 20px;
  }
  #right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: #00F;
    margin-left: 20px;
  }
  #main {
    height: 200px;
    background-color: #0F0;
    overflow: hidden;
  }

方法二：float + position

这个方案同样是使用 float 属性来定位元素，但是使用了 position 属性，也是一种比较基础的方案。下面是示例代码：

  <div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="main">main</div>
  </div>

  #container {
    overflow: hidden;
    background-color: #EEE;
    position: relative;
  }
  #left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 200px;
    background-color: #F00;
  }
  #right {
    position: absolute;
    right: 0;
    width: 100px;
    height: 200px;
    background-color: #00F;
  }
  #main {
    margin: 0 110px;
    height: 200px;
    background-color: #0F0;
    overflow: hidden;
  }

方法三：flexbox

CSS3 中添加的 flexbox 布局方式允许我们更简单地实现三栏布局，以下是示例代码：

  <div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="main">main</div>
  </div>

  #container {
    background-color: #EEE;
    display: flex;
  }
  #left {
    width: 100px;
    height: 200px;
    background-color: #F00;
  }
  #right {
    width: 100px;
    height: 200px;
    background-color: #00F;
  }
  #main {
    flex: 1;
    height: 200px;
    background-color: #0F0;
  }

方法四：table

使用 table 布局方式同样可以实现三栏布局，以下是示例代码：

  <table id="container">
    <tr>
      <td id="left">left</td>
      <td id="main">main</td>
      <td id="right">right</td>
    </tr>
  </table>

  #container {
    background-color: #EEE;
    width: 100%;
    height: 200px;
  }
  #left {
    width: 100px;
    background-color: #F00;
  }
  #right {
    width: 100px;
    background-color: #00F;
  }
  #main {
    background-color: #0F0;
  }

方法五：grid

CSS3 中新增的 grid 布局方式同样能够实现三栏布局，以下是示例代码：

  <div id="container">
    <div id="left">left</div>
    <div id="main">main</div>
    <div id="right">right</div>
  </div>

  #container {
    background-color: #EEE;
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 200px;
  }
  #left {
    background-color: #F00;
  }
  #right {
    background-color: #00F;
  }
  #main {
    background-color: #0F0;
  }

方法六：双飞翼布局

双飞翼布局是对圣杯布局的一种优化，其实质是将左右两栏通过相对定位后使用 margin 调整位置，中心主体内容通过负边距向左向右调整位置。以下是示例代码：

  <div id="container">
    <div id="main">main</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>

  #container {
    background-color: #EEE;
    overflow: hidden;
    padding: 0 100px;
  }
  #main {
    width: 100%;
    height: 200px;
    background-color: #0F0;
    margin: 0 auto;
  }
  #left {
    width: 100px;
    height: 200px;
    background-color: #F00;
    position: relative;
    left: -100px;
    margin-left: -100%;
  }
  #right {
    width: 100px;
    height: 200px;
    background-color: #00F;
    position: relative;
    right: -100px;
    margin-right: -100%;
  }

示例说明

下面我们以方法六为例，演示双飞翼布局的具体实现步骤。

第一步，HTML 结构：

  <div id="container">
    <div id="main">main</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>

第二步，CSS 样式：

  #container {
    background-color: #EEE;
    overflow: hidden;
    padding: 0 100px;
  }
  #main {
    width: 100%;
    height: 200px;
    background-color: #0F0;
    margin: 0 auto;
  }
  #left {
    width: 100px;
    height: 200px;
    background-color: #F00;
    position: relative;
    left: -100px;
    margin-left: -100%;
  }
  #right {
    width: 100px;
    height: 200px;
    background-color: #00F;
    position: relative;
    right: -100px;
    margin-right: -100%;
  }

通过以上代码的实现，我们可以得到一个完整的双飞翼布局。