詳解CSS多種三列自適應(yīng)布局實現(xiàn)

發(fā)布時間：2021-02-24 15:25:01 作者：寒蟬zero_Fsc

這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

為了按照常規(guī)WEB布局，這里全部采用擁有header和footer模式進行左中右布局編寫。

第一種：基于float實現(xiàn)

實現(xiàn)思路

常規(guī)思路，使左右兩個Aside分別浮動至左右兩側(cè)即可

代碼實現(xiàn)

<!-- HTML部分 -->
<div class="container">
  <!-- 頂部Header -->
  <header>這里是頭部</header>
  <!-- 中間aside及content -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- 中間content顯示內(nèi)容 為了防止將右側(cè)擠下去故放置在右側(cè)欄下方 -->
    <div class="content">這里是內(nèi)容</div>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  .clearfix {
    zoom: 1;
    &::after {
      display: block;
      content: ' ';
      clear:both
    }
  }
  
  html, body {
    width: 100%;
    height: 100%
    }
    .container {
      width: 100%
      height: 100%
      header {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      footer {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      .middle {
        height: calc(100% - 80px - 80px)
        aside {
          height: 100%;
          width: 300px;
          background: rgba(156, 154, 249, 1)
        }
        .left {
          float: left
        }
        .right: {
          float: right
        }
      }
    }
  }
</style>

實現(xiàn)效果

第二種：基于position：absolute實現(xiàn)

實現(xiàn)思路

為中間三欄父級賦予position: relative，賦予左右Aside position: absolute，并且分別賦予left: 0 right: 0 width:自定義值，賦予中間content left，right 分別等于左右width即可

代碼實現(xiàn)

<!-- HTML相關(guān)代碼 -->
<div class="container">
  <!-- 頂部Header -->
  <header></header>
  <div class="middle">
    <!-- 左側(cè)Aside -->
    <aside class="left"></aside>
    <!-- 中間content內(nèi)容 -->
    <div class="content">這里是內(nèi)容</div>
    <!-- 右側(cè)Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS相關(guān)代碼 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0
  }
  
  html, body {
    width: 100%;
    height: 100%
  }
  
  .container {
    width: 100%;
    height: 100%;
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      height: calc(100% - 80px - 80px);
      position: relative;
      aside,
      .content {
        position: absolute;
      }
      .left {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        left: 0;
        height: 100%;
      }
      .right {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        right: 0;
        height: 100%;
      }
      .content {
        left: 300px;
        right: 300px;
      }
    }
  }
</style>

實現(xiàn)效果

第三種：基于display：flex實現(xiàn)

實現(xiàn)思路

賦予左中右三列父級display: flex，賦予左右Aside width自定義，賦予中間content flex:1即可

代碼實現(xiàn)

<!-- HTML相關(guān)代碼 -->
<div class="container">
  <!-- 頂部Header -->
  <header></header>
  <div class="middle">
    <!-- 左側(cè)Aside -->
    <aside class="left"></aside>
    <!-- 中間content內(nèi)容 -->
    <div class="content">這里是內(nèi)容</div>
    <!-- 右側(cè)Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: flex;
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        flex: 1;
      }
    }
  }
</style>

實現(xiàn)效果

第四種：基于display: table實現(xiàn)

實現(xiàn)思路

賦予左中右三列父級display: table, width: 100%，分別賦予左中右三列display: table-cell，分別賦予左右Aside width即可。

代碼實現(xiàn)

<!-- HTML相關(guān)代碼 -->
<div class="container">
  <!-- 頂部Header -->
  <header></header>
  <div class="middle">
    <!-- 左側(cè)Aside -->
    <aside class="left"></aside>
    <!-- 中間content內(nèi)容 -->
    <div class="content">這里是內(nèi)容</div>
    <!-- 右側(cè)Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: table;
      width: 100%
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        display: table-cell;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        display: table-cell;
      }
    }
  }
</style>

實現(xiàn)效果

第五種：基于display: grid實現(xiàn)

實現(xiàn)思路

賦予左中右三列父級display: grid，并且使用grid-template-columns: 300px auto 300px，將其分為寬為300px、auto、300px三列布局即可。

代碼實現(xiàn)

<!-- HTML相關(guān)代碼 -->
<div class="container">
  <!-- 頂部Header -->
  <header></header>
  <div class="middle">
    <!-- 左側(cè)Aside -->
    <aside class="left"></aside>
    <!-- 中間content內(nèi)容 -->
    <div class="content">這里是內(nèi)容</div>
    <!-- 右側(cè)Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: grid;
      grid-template-columns: 300px auto 300px;
      height: calc(100% - 80px - 80px);
      aside {
        background: rgba(156, 154, 249, 1);
      }
    }
  }
</style>

實現(xiàn)效果