三栏式布局的几种实现方式

一、

两边侧边栏一个左浮动一个右浮动并且宽度是一定的，这样两边就脱离了文档流，然后中间的部分就会在两个侧边栏的下面，只要留出两边宽度的margin值，中间就可以自适应了。

值得注意的是center部分的html要写在两个侧边栏下面，否则两个侧边栏会一高一低
简单，兼容性好，但需要清除浮动

// style部分
.left{
      width: 100px;
      height: 500px;
      /* background: blue; */
      float: left;
    }
    .right{
      width: 100px;
      height: 500px;
      /* background: yellow; */
      float: right;
    }
    .center{
      height: 500px;
      margin: 0 100px;
      background: red;
    }

// html部分
  <div class="left">我是左边栏</div>
  <div class="right">我是右边栏</div>
  <div class="center">我是中间内容</div>
复制代码

二、

使用绝对定位将两个盒子定位在左上角和右上角，原理与一方法差不多，也是利用脱离文档流。

值得注意的是这种方式html的顺序是不影响布局的

// style部分
*{
      margin: 0;
      padding: 0;
    }
    .left{
      width: 100px;
      height: 500px;
      background: blue;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
      width: 100px;
      height: 500px;
      background: yellow;
      position: absolute;
      right: 0;
      top: 0;
    }
    .center{
      height: 500px;
      margin: 0 100px;
      background: red;
    }

// html部分
  <div class="left">我是左边栏</div>
  <div class="center">我是中间内容</div>
  <div class="right">我是右边栏</div>
复制代码

三、

flex布局，父盒子display: flex,中间自适应部分flex:1,两侧固定宽高。

// style部分
*{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
    }
    .left{
      width: 100px;
      height: 500px;
      background: blue;
    }
    .right{
      width: 100px;
      height: 500px;
      background: yellow;
    }
    .center{
      height: 500px;
      flex: 1;
      background: red;
    }

// html部分
  <div class="container">
    <div class="left">我是左边栏</div>
    <div class="center">我是中间内容</div>
    <div class="right">我是右边栏</div>
  </div>
复制代码

非常简单直接，就是兼容性不太好，不能兼容IE8以下的浏览器

四、

表格布局，父级盒子设置display: table;width: 100%;,子级盒子display: table-cell;,左右两侧栏设置定宽。

兼容性比flex布局好点，但是当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的

// style部分
*{
      margin: 0;
      padding: 0;
    }
    .container{
      display: table;
      width: 100%;
    }
    .left{
      width: 100px;
      height: 500px;
      background: blue;
      display: table-cell;
    }
    .right{
      width: 100px;
      height: 500px;
      background: yellow;
      display: table-cell;
    }
    .center{
      height: 500px;
      background: red;
      /* display: table-cell; */ 
    }

// html部分
  <div class="container">
    <div class="left">我是左边栏</div>
    <div class="center">我是中间内容</div>
    <div class="right">我是右边栏</div>
  </div>
复制代码

五、

grid布局,父级盒子设置display: grid;,并且设置好有几行几列和宽高，轻松实现。

兼容性不太好

// style部分
 *{
      margin: 0;
      padding: 0;
    }
    .container{
      display: grid;
      grid-template-rows: 500px;
      grid-template-columns: 100px auto 100px;
    }
    .left{
      background: blue;
    }
    .right{
      background: yellow;
    }
    .center{
      background: red;
    }

// html部分
  <div class="container">
    <div class="left">我是左边栏</div>
    <div class="center">我是中间内容</div>
    <div class="right">我是右边栏</div>
  </div>
复制代码