什么是圣杯和双飞翼布局
圣杯布局和双飞翼布局是三列左右两列宽度固定中间自适应布局的两种不同方式的决绝方案。
当然现在最简单的实现左右两列宽度固定中间宽度自适应的解决方案是flex布局。
圣杯布局
首先说圣杯布局， 圣杯布局的实现方式是通过float将三列浮动，给左右两列固定的宽度， 中间使用宽度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>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.content {
height: auto;
}
.header {
background-color: #f00;
}
.middle, .left, .right {
float: left;
}
.wrapper {
padding-left: 100px;
padding-right: 100px;
}
.middle {
width: 100%;
background-color: #ff0;
}
.left {
position: relative;
margin-left: -100%;
right: 100px;
width: 100px;
background-color: #f0f;
}
.right {
position: relative;
margin-right: -100px;
width: 100px;
background-color: #00f;
}
.footer {
clear: both;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content wrapper">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
首先将中间三个元素浮动， 之后会引起由于浮动高度塌陷的问题。 我们需要清除浮动， 最常用的方式有两种， 给content’设置 overflow:hidden。或者是给后面的元素footer 设置 clear：both。
效果图如下：
双飞翼布局
双飞翼布局是将left和right将middle两边覆盖掉， 像一双翅膀一样。然后给中间的middle设置一个子元素，子元素加上padding的left和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>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.header {
background: #f00;
}
.middle {
float: left;
width: 100%;
background: #0f0;
}
.wrapper {
padding-left: 100px;
padding-right: 100px;
}
.left, .right {
width: 100px;
float: left;
}
.left {
margin-left: -100%;
background: #00f;
}
.right {
margin-left: -100px;
background: #ff0;
}
.footer {
clear: both;
background: #0ff;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="middle">
<div class="wrapper">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
</html>
效果图如下：
