今天主要学习了一些经典的方案布局方法：
1、上中下一栏式
2、左右两栏式
3、左右两栏加页眉页脚
4、左中右三栏
5、左中右三栏页眉页脚
这里主要想总结一下左中右三栏的 双飞翼布局。
先贴上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
margin: 0 auto;
width: 80%;
}
#main{
float: left;
width: 100%;
background: green;
}
#left{
float: left;
width: 200px;
background: yellow;
height: 800px;
margin-left: -100%;
}
#right{
float: left;
width: 200px;
background: yellow;
height: 800px;
margin-left: -200px;
}
.content{
height: 800px;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="wrap">
<section id="main">
<div class="content">#main</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
</body>
</html>整个思路是：
1、首先在div中创造“大鸟”的身体section，然后随后跟上两个“翅膀”左和右。
2、三个元素都设置为float：left，大鸟身体宽度设置为100%，在浏览器中查看发现大鸟在上边占满了一整行，翅膀会被挤到下一行显示。
3、将左翅膀设置margin-left：-100%，把其推到上一行的相同位置。
4、将右翅膀设置margin-left：-（width），把其推到上一行的右边靠边位置。
注：这里虽然在浏览器中显示正常了，但是实际上翅膀下面还存在着被遮盖的部分，先考虑把main加margin或padding值，但是会造成布局错乱。
5、这里通过在main下再嵌套一层content，利用margin的传递，从content传递到父级main来控制父级的位置。
最后成功达到目的。
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
