CSS实现三栏布局的方法

经典CSS题目：三栏布局

假设页面高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

• 方法1：浮动解决方案

<style>
    .layout{
    width: 100%;
    min-height: 200px;
    }
    .layout .left{
    float: 
    left;width: 300px;
    background: red;
    }
    .layout .right{
    float: right;
    width: 300px;background: blue;
    }
    .layout .center{
    background: yellow;
    }
</style>   
<section class="layout float">
  <div class="left">左</div>
  <div class="right">右</div>  
  <div class="center">中</div>
</section>

• 方法2:定位

<style>
    .layout{
    width: 100%;
    min-height: 200px;
    }
    .layout .left{
    position: absolute;
    left: 0;
    width: 300px;
    background: red;
    }
    .layout .right{
    position: absolute;
    right: 0;
    width: 300px;
    background: blue;
    }
    .layout .center{
    left: 300px;
    right: 300px;
    background: yellow;
    }
</style>
<section class="layout absolute">
  <div class="left">左</div>
  <div class="right">右</div>  
  <div class="center">中</div>
</section>

• 方法3：flexbox

<style>
.layout{
  width: 100%;
  display: flex;
  min-height: 200px;
  }
.layout .left{
  width: 300px;
  background: red;
  }
.layout .right{
  width: 300px;
  background: blue;
  }
.layout .center{
  flex: 1;
  background: yellow;
  }
</style>
<section class="layout flexbox">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>

• 方法4：表格

<style>
.layout{
  width: 100%;
  display: table;
  min-height: 200px;
  }
.layout>div{
  display: table-cell;
}
.layout .left{
  width: 300px;
  background: red;
  }
.layout .right{
  width: 300px;
  background: blue;
  }
.layout .center{
  flex: 1;
  background: yellow;
  }
</style>
<section class="layout table">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>

• 方法5：网格布局

<style>
.layout{
  width: 100%;
  display: grid;
  grid-template-columns: 300px auto 300px;
  grid-template-rows: 100px;
  }
.layout .left{
  background: red;
  }
.layout .right{
  background: blue;
  }
.layout .center{
  background: yellow;
  }
</style>
<section class="layout grid">
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</section>