【CSS】双飞翼布局
双飞翼布局和圣杯布局实现的是一样的效果，中间栏自适应，两侧栏宽度固定。不同的地方在于同样设置main宽度为100%,为避免内容遮挡采取的方式不同，在main中又添加了一个div设置它的margin：0px 200px;即可。而且内容也不需要设置word-break即可包裹在中间有效区域。
完整源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
div{
padding:0px;
margin:0px;
}
.container{
min-width: 400px;
background: #eee;
height: 200px;
}
.left,.right{
width: 200px;
height: 200px;
background: red;
float: left;
}
.main{
width:100%;
height: 200px;
background: blue;
float: left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.main_w{
margin:0px 200px;
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<div class="main">
<div class="main_w">中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间1栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中
间栏中1间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏</div>
</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
</html>效果图