CSS实现三栏布局的8种方式

1、float实现三栏布局

给左盒子设置float：left，给右盒子设置float：right，中间盒子设置margin-left和margin-right。需要注意的是，左右盒子要放在中间盒子之前。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="right">right</div><div class="middle">middle</div>
</body>
<style>*{margin: 0px;padding: 0px;height: 700px;}.left{float: left;width: 200px;background-color: aqua;}.right{float: right;width: 300px;background-color: aquamarine;}.middle{margin-left: 200px;margin-right: 300px;background-color: bisque;}
</style>
</html>

2、absolute实现三栏布局

给左右盒子设置position：absolute，给左盒子设置left：0；top：0，给右盒子设置right：0；top：0；给中间盒子设置margin-left和margin-right。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="middle">middle</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;}.left{position: absolute;top: 0;left: 0;width: 200px;background-color: aqua;}.right{position: absolute;top: 0;right: 0;width: 300px;background-color: aquamarine;}.middle{margin: 0 300px 0 200px;background-color: antiquewhite;}
</style>
</html>

3、flex实现三栏布局

给父元素设置display：flex，给中间的盒子设置flex：1。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="middle">middle</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;}body{display: flex;}.left{width: 200px;background-color: aqua;}.right{width: 300px;background-color: aquamarine;}.middle{flex: 1;background-color: antiquewhite;}
</style>
</html>

4、table实现三栏布局

给父元素设置display：table，给子元素都设置display：table-cell。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="middle">middle</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;}body{display: table;width: 100%;}.left{display: table-cell;width: 200px;background-color: aqua;}.middle{display: table-cell;background-color: antiquewhite;}.right{display: table-cell;width: 300px;background-color: aquamarine;}
</style>
</html>

5、grid实现三栏布局

给父元素设置：display：grid；grid-template-colums：左盒子宽度 auto 右盒子宽度；grid-template-rows：高度。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="middle">middle</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;}body{display: grid;grid-template-columns: 200px auto 300px;grid-template-rows: 700px;}.left{background-color: aqua;}.middle{background-color: antiquewhite;}.right{background-color: aquamarine;}
</style>
</html>

6、calc实现三栏布局

给三个盒子都设置float：left，给中间盒子设置：width：calc(100% - 左右盒子宽度之和)。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="left">left</div><div class="middle">middle</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;width: 100%;}.left{float: left;width: 200px;background-color: aqua;}.middle{float: left;width: calc(100% - 500px);background-color: antiquewhite;}.right{float: left;width: 300px;background-color: aquamarine;}
</style>
</html>

7、圣杯布局实现三栏布局

给父元素设置margin-left和margin-right，给三个盒子都设置float：left，左盒子设置position：relative；left：-宽度；margin-left：-100%，右盒子设置right：-宽度；margin-right：-宽度，中间盒子设置：width：100%。需要注意的是，中间的盒子要放在左右盒子之前。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="middle">middle</div><div class="left">left</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;}body{margin-left: 200px;margin-right: 300px;}.left{position: relative;float: left;width: 200px;margin-left: -100%;left: -200px;background-color: aqua;}.middle{float: left;width: 100%;background-color: antiquewhite;}.right{float: left;width: 300px;margin-right: -300px;right: -300px;background-color: aquamarine;}
</style>
</html>

8、双飞翼布局实现三栏布局

给三个盒子都设置：float：left，给中间的盒子增加一个内盒子，给内盒子设置margin-left和margin-right，中间盒子设置：width：100%，左盒子设置：margin-left：-100%；右盒子设置：margin-left：-宽度。代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><div class="middle">middle</div></div><div class="left">left</div><div class="right">right</div>
</body>
<style>*{margin: 0;padding: 0;height: 700px;}.container{float: left;width: 100%;background-color: antiquewhite;}.left{float: left;width: 200px;margin-left: -100%;background-color: aqua;}.middle{margin-left: 200px;margin-right: 300px;}.right{float: left;width: 300px;margin-left: -300px;background-color: aquamarine;}
</style>
</html>