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

我依舊已久發表於2019-03-03

一、

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

相關文章