双飞翼布局 又称 圣杯布局 ，用于三列的布局，其中左右两列固定在两侧，中间一列宽度自适应。
我们来看看传统的布局：
<div id='container'>
<div class='left'></div>
<div class='main'></div>
<div class='right'></div>
</div>
这样的布局是加载的时候的顺序是left - main - right，相比之下，双飞翼布局的优势在于能优先加载class = ‘main’的div节点 ；这在一些对主要内容加载速度有要求的网站很有用，像淘宝这些，中间的内容是它们最优先显示给用户的。
技巧：
1.三列先浮动
2.左右定宽
3.中间空出左右两列的位置，用padding
4.左右两列用margin-left，left复值来控制位置
当在浮动中，位置不够的时候会被挤下来，如果给记下来的元素的margin-left：-自身的宽度，那么它就在上一行占有位置了。
当margin-left:-100%;就刚好在上一行的左侧；通过这样来实现圣杯布局的左侧。
右侧也同理，当在上一行占有位置的时候，再用left：自身宽度，就可以移动到右侧
下面看看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style>
*{
padding:0;
margin:0;
color:#fff;
font-family:'微软雅黑';
text-align:center;
font-size:25px;
}
#container{
min-width:650px;
}
#header,#footer{
height:50px;
background:#000;
line-height:50px;}
#body{
overflow:hidden;
padding:0 200px;
}
.main{
width:100%;
line-height:50px;
background:#ccc;
float:left;
}
.left{
background-color:#00F;
line-height:50px;
width:200px;
position:relative;
float:left;
left:-200px;
margin-left:-100%;
}
.right{
float: left;
background: #00F;
line-height:50px;
width:200px;
margin-left:-200px;
position:relative;
left:200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">头部</div>
<div id="body">
<div class="main">中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div></div>
</div>
<div id="footer">尾部</div>
</div>
</body>
</html>
这样就差不多啦！自己做一遍就明白啦！
前端爱好者们约定，阅读后：
if（‘觉得有用’）
｛
分享到朋友圈（‘I get it！’）;
｝
else if（‘已了解’）
｛
分享到朋友圈（‘a piece of cake！’）;
｝
else if('看不懂')
{
回复小编（'help me!'）;
}
图片来源于网络，感谢图片分享者！
扫一扫
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
