网页布局：五种方法实现三栏布局

前言

以下五种方法都可以实现三栏布局，效果如下：

也可以自己调节属性参数，获得四栏、五栏等效果，或者是自己想要的宽度。

1、漂移布局

• html

  <div class="left-center-right">
      <div class="left">左边</div>
      <!-- 右栏部分要写在中间内容之前 -->
      <div class="right">右边</div>
      <div class="center">中间</div>
  </div>
  

  注意：右栏部分要写在中间内容之前。

• css

  .left-center-right>div {
      height: 150px;
  }
  
  .left {
      float: left;
      width: 300px;
      background: red;
  }
  
  .center {
      background: yellow;
  }
  
  .right {
      float: right;
      width: 300px;
      background: blue;
  }
  

2、绝对布局

• html

  <div class="left-center-right">
      <div class="left">左边</div>
      <div class="center">中间</div>
      <div class="right">右边</div>
  </div>
  

  因为是绝对布局，所以这里三栏的顺序没有要求。

• css

  .left-center-right>div {
      position: absolute;
      height: 150px;
  }
  
  .left {
      left: 0;
      width: 300px;
      background: red;
  }
  
  .center {
      /* 离左右各三百 */
      right: 300px;
      left: 300px;
      background: yellow;
  }
  
  .right {
      right: 0;
      width: 300px;
      background: blue;
  }
  

3、flex布局

• html

  <div class="left-center-right">
  	<div class="left">左边</div>
  	<div class="center">中间</div>
  	<div class="right">右边</div>
  </div>
  

• css

  .left-center-right {
      display: flex;
  }
  
  .left-center-right>div {
      height: 150px;
  }
  
  .left {
      flex: 1;
      background: red;
  }
  
  .center {
      flex: 2;
      background: yellow;
  }
  
  .right {
      flex: 1;
      background: blue;
  }
  

  采用flex布局的元素，称为flex容器，简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。

  把left-center-right设置为flex容器后，left、center和right就自动成为容器成员。

  设置flex:1说明该容器成员的宽度占flex容器宽度的一份，flex:2说明该容器成员的宽度占flex容器宽度的两份。比如上面的css的容器成员一共设置了4份flex，所以left的宽度就占flex容器宽度的1/4，center占1/2，right占1/4。

4、表格布局

• html

  <div class="left-center-right">
  	<div class="left">左边</div>
  	<div class="center">中间</div>
  	<div class="right">右边</div>
  </div>
  

• css

  .left-center-right {
      display: table;
      height: 150px;
      width: 100%;
  }
  
  .left-center-right>div {
      display: table-cell;
  }
  
  .left {
      width: 300px;
      background: red;
  }
  
  .center {
      background: yellow;
  }
  
  .right {
      width: 300px;
      background: blue;
  }
  

5、网格布局

• html

  <div class="left-center-right">
  	<div class="left">左边</div>
  	<div class="center">中间</div>
  	<div class="right">右边</div>
  </div>
  

• css

  .left-center-right {
      display: grid;
      /* 行宽 */
      grid-template-columns: 300px auto 300px;
      /* 行高 */
      grid-template-rows: 150px
  }
  
  .left {
      background: red;
  }
  
  .center {
      background: yellow;
  }
  
  .right {
      background: blue;
  }