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>