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>版权声明：本文为cute_ming原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。