1、前言
圣杯布局和双飞翼布局实现的布局效果是相同的，就是两边的宽度确定，中间宽度自适应的左中右三栏布局。
2、圣杯布局和双飞翼布局区别
相同点：三栏全部float浮动，左右两边的栏目加上负margin使其跟中间栏并排，以形成三栏布局。
圣杯布局
对包裹左中右三栏的div设置左右padding后，对左右两栏使用相对布局relative，并分别配合right和left属性，使得左右两栏相对自己偏移以后不遮挡中间栏。
双飞翼布局
对中间栏包裹一层div，div占据100%的宽度以后，对div分别左右margin出左右两栏的宽度，使得左右两栏不遮挡中间栏。
3、圣杯布局和双飞翼布局实现
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style type="text/css">
.container {
padding: 0 200px 0 100px;
}
.middle {
float: left;
width: 100%;
height: 200px;
background: red
}
.left,.right {
float: left;
position: relative;
height: 200px;
}
.left {
width: 100px;
margin-left: -100%;
left: -100px;
background: green;
}
.right {
width: 200px;
margin-right: -200px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">
middle
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style type="text/css">
.container {
float: left;
width: 100%;
}
.middle {
margin: 0 200px 0 100px;
background: red;
height: 200px;
}
.left,.right {
float: left;
position: relative;
height: 200px;
}
.left {
width: 100px;
margin-left: -100%;
background: green;
}
.right {
width: 200px;
margin-left: -200px;
background: yellow;
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="middle">
middle
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
4、其他实现方法
4.1 使用calc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style type="text/css">
.left,.right,.middle {
float: left;
position: relative;
height: 200px;
}
.middle {
width: calc(100% - 300px);
background: red
}
.left {
width: 100px;
background: green;
}
.right {
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="left">
left
</div>
<div class="middle">
middle
</div>
<div class="right">
right
</div>
</body>
</html>
4.2 使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style type="text/css">
.container {
display: flex;
flex-direction: row;
height: 200px;
}
.middle {
flex: 1;
background: red
}
.left {
width: 100px;
background: green;
}
.right {
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
left
</div>
<div class="middle">
middle
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
5、总结
两边定宽，中间自适应的三栏布局是实际开发过程中使用的比较多的布局，上面介绍了圣杯布局和双飞翼布局的一些实现方法。实际开发过程中，推荐使用flex来实现，其他方式只是用来作为了解即可。
