三栏布局一般指左右两栏宽度固定，中间栏宽度自适应的布局。如下图所示。
当浏览器窗口的宽度发生变化时，中间部分也会跟着自适应改变。接下来，将介绍几种实现它的方式。
1、使用绝对定位布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三栏布局-绝对定位</title>
<style>
.container {
position: relative;
}
.container div {
position: absolute;
top: 0;
height: 100px;
}
.left {
width: 200px;
left: 0;
background-color: red;
}
.mid {
background-color: green;
left: 200px;
right: 200px;
}
.right {
right: 0;
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
</body>
</html>
2、使用左右浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三栏布局-左右浮动布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container{
min-width: 600px;
}
.container div{
min-height: 100px;
}
.left {
width: 200px;
background-color: red;
float: left;
}
.right {
width: 150px;
background-color: blue;
float: right;
}
.mid {
background-color: green;
min-width: 100px;
margin: 0 150px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<!-- 这里的mid要放在最后，浮动原因 -->
<div class="left">左</div>
<div class="right">右</div>
<div class="mid">中</div>
</div>
</body>
</html>
3、flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三栏布局-flex布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container{
min-width: 600px;
display: flex;
justify-content: space-between;
}
.container div{
min-height: 100px;
}
.left {
order: 1;
width: 200px;
background-color: red;
}
.mid {
order: 2;
flex: 1;
background-color: green;
min-width: 100px;
}
.right {
order: 3;
width: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
</body>
</html>
4、grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三栏布局-grid布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
width: 100%;
grid-template-columns: 200px auto 150px;
}
.container div {
min-height: 100px;
}
.left {
grid-row: 1/2;
grid-column: 1/2;
background-color: red;
}
.mid {
grid-row: 1/2;
grid-column: 2/3;
background-color: green;
}
.right {
grid-row: 1/2;
grid-column: 3/4;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
</body>
</html>
5、table-cell布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三栏布局-table-cell布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container div {
display: table-cell;
height: 100px;
min-height: 100px;
}
.left {
width: 200px;
min-width: 200px;
background: red;
}
.mid {
width: 100%;
background: green;
}
.right {
width: 150px;
min-width: 150px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="mid">中</div>
<div class="right">右</div>
</div>
</body>
</html>