圣杯布局和双飞翼布局

两种布局的由来

• 这是需求导致。两个需求： 一，优先加载中间的盒子；二，中间盒子能自适应宽度，两边盒子不变。为了实现这样的需求，产生了这两种布局

布局思路

• 为了满足第一个需求，所以中间的盒子必须得先写，然后，两边的盒子写在后面。同时为了满足中间盒子能够自适应，宽度需要设置为100%，然后再布局两边的盒子

圣杯布局

<style>
.main {
padding: 0 200px;
}
.middle {
width: 100%;
float: left;
min-width: 500px;
}
.left {
width: 200px; 数值只是举例
float: left;
margin-left: -100%; 这样才能与中间盒子显示为一行，移动到左边
position: relative;
left: -200px; 因为设置内边距，两边盒子也会挤到中间，所以要用定位移动
}
.right {
width: 200px; 数值只是举例
float: left;
margin-left: -200px; 这样才能与中间盒子显示为一行，移动到右边
position: relative;
left: 200px; 因为设置内边距，两边盒子也会挤到中间，所以要用定位移动
}
</style>
<div class="main">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>

双飞翼布局

<style>
.middle {
width: 100%;
float: left;
}
.middle-in{
margin: 0 200px; 双飞翼和圣杯的差别就在这里，当middle里面再嵌套一个盒子后，就可以直接设置margin来调整宽度，而不影响外边的盒子，两边的就不用再定位了
min-width: 500px;
}
.left {
width: 200px; 数值只是举例
float: left;
margin-left: -100%; 这样才能与中间盒子显示为一行，移动到左边
}
.right {
width: 200px; 数值只是举例
float: left;
margin-left: -200px; 这样才能与中间盒子显示为一行，移动到右边
}
</style>
<div class="main">
<div class="middle">
<div class="middle-in"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>