一、双飞翼布局简介
“双飞翼布局”可以比作一只天使，可以把center看成是鸟的身体，left和right则是天使的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。（双飞翼的特点就是给天使的身体上在加上一个盔甲<一个div>）。它的优点是：代码比圣杯布局简单一些，而且微调的时候较简单。
二、代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>双飞翼布局</title>
<link rel="stylesheet" href="diu4.css"/>
</head>
<body>
<div class="box">
<div class="rrr">
<div class="center"></div>
写内容
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>body{margin:0px;}
.box{
margin:0 auto;
background:red;
position:relative;
height:300px;
}
.left{
height:300px;
width:200px;
float:left;
background:green;
position:absolute;
left:0px;
top:0px;
}
.center{
margin:0px 200px;
}
.right{
height:300px;
width:200px;
float:right;
background:yellow;
position:absolute;
right:0px;
top:0px;
}
.rrr{
margin:0px 200px 0px 200px;
width:100%;
background-color:blue;
height:300px;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。