前言
- 圣杯布局与双飞翼布局，都是属于三列布局的经典布局。
- 双飞翼布局是圣杯布局的优化版，由淘宝UED提出
- 它们的效果图类似，但是实现方法不同。
字面意思
圣呗布局和双飞翼布局从字面意思来看是这样的：
一个像圣杯或者像展翅的禽类这样的布局
通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。
两者本质
image.png
圣杯布局
圣杯布局
原理：利用父级padding内边距
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
预览链接：圣杯布局
缺点：.mian的最小宽度不能小于.aside的宽度
image.png
把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度<aside的宽度，就不能容纳aside，所以将其挤到了下一行。
解决方法：可以给父容器content加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
div
<div id="content">
<!-- 自适应元素至于顶层，否则其他元素位置错乱 -->
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
</html>
#content{
border:1px solid #999;
padding-left: 100px; /*利用内边距填充内容,且填充元素的宽度必须一致*/
padding-right: 100px;/*利用内边距填充内容,且填充元素的宽度必须一致*/
min-width:200px;/*防止不断挤压宽度，main宽度过小，造成布局错乱*/
}
#content:after{/*清除浮动*/
content:'';
display:block;
clear:both;
}
.main, .aside, .extra{ /*元素全部浮动*/
float:left;
}
.main{
background:blue;
height:350px;
width: 100%; /*宽度自适应*/
}
.aside{
background:red;
width: 100px;/*利用父级内边距填充内容,宽度与父级宽度必须一致*/
height:300px;
margin-left: -100%; /*减去浮动main的宽度，置于main层级左边*/
position: relative;
left: -100px;/*移动到父级内边距中*/
}
.extra{
background:yellow;
width: 100px; /*利用父级内边距填充内容,宽度与父级宽度必须一致*/
height:300px;
margin-left: -100px; /*减去浮动aside的宽度，置于main层级右边*/
position: relative;
left: 100px;/*移动到父级内边距中*/
}
双飞翼布局
双飞翼布局
原理：利用自身margin外边距
- 是三列布局，两边固定宽度，中间自适应
- 中间内容元素在 dom 元素次序中优先位置
预览链接：双飞翼布局
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content">
<!-- 自适应元素至于顶层，否则其他元素位置错乱 -->
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
</html>
#content{
border:1px solid #999;
}
#content:after{/*清除浮动*/
content:'';
display:block;
clear:both;
}
.main,.aside,.extra{/*元素全部浮动*/
float:left;
}
.main{
width:100%;/*宽度自适应*/
}
.wrap{ /*子级wrap负责设置外边距*/
background:blue;
margin-left: 100px; /*利用外边距填充内容,且填充元素的宽度必须一致*/
margin-right: 100px; /*利用外边距填充内容,且填充元素的宽度必须一致*/
height:350px;
}
.aside{
width:100px;/*利用外边距填充内容,宽度与兄弟wrap宽度必须一致*/
height:300px;
background:red;
margin-left:-100%;/*减去浮动main的宽度，置于main层级左边*/
}
.extra{
width:100px;
height:300px;
background:yellow;
margin-left:-100px;/*减去自身的宽度，置于main层级右边*/
}
总结
- 圣杯布局是给三列的父元素（content），加上 左margin 和 右margin（或者 padding），将三列挤到中间来，这样左边和右边就会预留出位置。
- 双飞翼布局是在main的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
