三欄式佈局的幾種實現方式

1、

兩邊側邊欄一個左浮動一個右浮動而且寬度是必定的，這樣兩邊就脫離了文檔流，而後中間的部分就會在兩個側邊欄的下面，只要留出兩邊寬度的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>
複製代碼

2、

使用絕對定位將兩個盒子定位在左上角和右上角，原理與一方法差很少，也是利用脫離文檔流。

值得注意的是這種方式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>
複製代碼

3、

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如下的瀏覽器

4、

表格佈局，父級盒子設置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>
複製代碼

5、

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>
複製代碼