双飞翼布局详解

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

原理：

双飞翼布局为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

css代码：

.header,.footer{
				height: 200px;
				width: 100%;
				background-color: #0000FF;
			}
			.content,.left,.right{
				float: left;
				height: 200px;
			}
			.content{
				width: 100%;
				background-color: red;
			}
			.left{
				width: 300px;
				background-color: pink;
				margin-left: -100%;
			}
			.right{
				width: 300px;
				background-color: grey;
				margin-left: -300px;
			}
			.center{
				height: 200px;
				margin-left: 300px;
				margin-right: 300px;
				}
				.container::after{
					content: "";
					display: block;
					clear: both;
				}
				body{
				   min-width: 600px;
				}

html代码：

<div class="header">头部</div>
		<div class="container">
			<div class="content">
				<div class="center">中间</div>
			</div>
			<div class="left">左边</div>
			<div class="right">右边</div>
		</div>
<div class="footer">尾部</div>

运行效果：

优缺点： 

优点：不会像圣杯布局那样变形。
缺点：多加了一层dom节点 。

今天的文章双飞翼布局详解分享到此就结束了，感谢您的阅读。