原文
大纲
1、三栏布局的引入
2、基本思路及不同实现方式的区别
3、布局实例
3.1、圣杯布局
3.2、双飞翼布局
1、三栏布局的引入
关于三栏式布局，常规情况下，可以使用float实现，也可以使用relative来实现。
但是，如果要求左右两层定宽，中间层的宽度随浏览器窗口宽度变化而变化，这种情况下，就适合使用圣杯和双飞翼布局。通过对圣杯及双飞翼布局学习之后，我认为两种布局的主旨是在html结构中，使中间的主体层位于左右两层的前面。
圣杯：指的是一种常用的网页布局，他可以由现有的技术（无一没有缺点）来实现。所以找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。
双飞翼布局：是一种灵活的布局，始于淘宝UED。如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。是对圣杯布局的一种改良。
其实，圣杯布局和双飞翼布局都是很早就出现了，只是国外大学生/淘宝UED将其归纳起来，系统化了。
任务效果图
2、基本思路及不同实现方式的区别
2.1、两种布局的基本构思为：首先让中间层100%宽度占满同一高度的空间，在左右两层被挤出中间层所在区域时， 使用margin-left的负值将左右两个层拉回与中间层同一高度的空间，接下来调整左右两层到指定位置， 最后使用中间层的margin或padding属性使中间层的内容躲出左右两层占住的显示区。
2.2、两种布局的主要区别在于：圣杯布局采用一个父层包含中间、左右三个子层，设置父层的padding值腾出左右两层的显示区， 并对左右两层使用relative和left、right值调整位置；双飞翼采用中间、左右三层并列，再在中间层里设置一个子层， 设置中间层子层的margin值腾出左右两层的显示区，对左右两层使用margin值即可调整位置；
3、布局实例
3.1、圣杯布局
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#container{
height:200px;
padding: 0px 120px 0 140px;/*腾出宽度,即让main中的内容不会被左右的部分覆盖*/
background:green;
}
#main{
height:200px;
width: 100%;
position: relative;
background:orange;
float:left;
}
#left{
height:200px;
width: 140px;
margin-left: -100%;/*将left层拉回main层所在高度区域*/
left: -140px;/*调整位置*/
position: relative;
background:blue;
float:left;
}
#right{
height:200px;
width: 120px;
margin-left: -120px;/*将right层拉回main层所在高度区域*/
right: -120px;/*调整位置*/
position: relative;
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
}
</style>
</head>
<body>
<header>header</header>
<div id="container">
<div id="main">main</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
3.2、双飞翼布局
<html>
<head>
<title>三栏布局</title>
<meta charset="utf-8">
<style>
header{
width: 100%;
height: 40px;
background-color: darkseagreen;
}
#main{
width: 100%;
height:200px;
position: relative;
float:left;
}
#main-inner{
margin:0 120px 0 140px;/*让main的内容不被左右的内容覆盖*/
background:red;
height:100%;
}
#left{
width: 140px;
height:200px;
margin-left: -100%;/*将left层拉回main层所在高度区域*/
background:blue;
float:left;
}
#right{
width: 120px;
height:200px;
margin-left: -120px;/*将right层拉回main层所在高度区域*/
background:yellow;
float:left;
}
footer{
width: 100%;
height: 30px;
background-color: darkslategray;
clear:both;/*避免因前面的元素浮动而上浮*/
}
</style>
</head>
<body>
<header>header</header>
<div id="main">
<div id="main-inner">min-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<footer>footer</footer>
</body>
</html>
网友评论