圣杯布局
使子元素在同一行显示我们可以看出，现在三个子元素是在一排显示的，因为我们给中间的子元素设置的宽度是 100%，并且中间的子元素在文档流的最前面，最先被渲染。
那么我们要使得三个元素在同一排显示。接下来我们要将 .left 和 .right 向上提。实际上我们是使用 margin-left 为 负值来实现的，我们将 .left 的 margin-left 设置为 -100%（负的中间子元素的宽度），这样，左边的元素就会被“提升”到上一层。
然后就是右边子元素了，只需要设置 margin-left 设置为负的自身的宽度。
结果如下：
这里写图片描述
使得中间子元素不被遮盖从上一张截图显示中显示中间的子元素被遮挡了，所以说我们要解决这个问题，要怎么解决呢？嗯... 只要使得中间的子元素显示的宽度刚好为左边元素和右边元素显示中间的宽度就可以。同时我们还必须保证是使用的半分比的布局方式。
这样的话有一种方式可以即使中间的宽度减少，又可以使中间的宽度仍然使用 100%，那就是设置父元素的 padding 值，将父元素的 padding-left 设置为左边子元素的宽度，将父元素的 padding-right 设置为右边子元素的宽度。
显示效果如下：
圣杯布局
将左边和右边的子元素像两边移动嗯... 这貌似也不是我们想要的效果，但是，中间的子元素确实是在中间了，那么我们只需要设置相对位置，将左边的子元素和右边的子元素向两边移动就好。
最终的 CSS 代码如下：
.container{
padding: 0 200px;
}
.middle{
width: 100%;
background: paleturquoise;
height: 200px;
float: left;
}
.left{
background: palevioletred;
width: 200px;
height: 200px;
float: left;
font-size: 40px;
color: #fff;
margin-left:-100%;
}
.right{
width: 200px;
height: 200px;
background: purple;
font-size: 40px;
float: left;
color: #fff;
margin-left:-200px;
}复制代码
最终效果如下：
圣杯布局
双飞翼布局其实双飞翼布局是为了解决圣杯布局的弊端提出的，如果你跟我一起将上面的圣杯布局的代码敲了一遍，你就会发现一个问题，当你将浏览器宽度缩短到一定程度的时候，会使得中间子元素的宽度比左右子元素宽度小的时候，这时候布局就会出现问题。所以首先，这提示了我们在使用圣杯布局的时候一定要设置整个容器的最小宽度。
