1、双飞翼布局概述
双飞翼布局同样来源淘宝，可以说是借鉴了圣杯布局，同时也解决了圣杯布局使用相对定位的缺陷。
2、双飞翼布局实现思路
（1）与圣杯布局一样，利用负边距技术实现初步效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.left{
width:198px;
height:200px;
float:left;
border: 1px solid red;
margin-left :-100%;
}
.right{
width:198px;
height:200px;
border: 1px solid blue;
float: left;
margin-left :-200px;
}
.center{
width : 100%;
height:200px;
float: left;
background :gray;
}
.footer{
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
运行效果：
image.png
（2）在cetner元素中间添加一个元素，设置margin-left和margin-right
center部分html源代码修改：
<div class="center">
<div class="center-inner">
center
</div>
</div>
center-inner 样式添加
.center-inner{
margin-left:200px;
margin-right:200px;
background:red;
}
运行效果：
image.png
3、等高双飞翼布局实现
（1）使用包裹元素contianer的overflow:hidden 触发BFC。
（2）使用 padding-bottom: 9999px; margin-bottom: -9999px;将元素展开，然后再把元素收回。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
background : yellow;
}
.container{
overflow: hidden;
}
.left{
width:198px;
float:left;
border: 1px solid red;
margin-left :-100%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right{
width:198px;
border: 1px solid blue;
float: left;
margin-left :-200px;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center{
width : 100%;
float: left;
background :gray;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center-inner{
margin-left:200px;
margin-right:200px;
background:red;
}
.footer{
background : blue;
}
</style>
</head>
<body>
<div class="header">heder</div>
<div class="container">
<div class="center">
<div class="center-inner">
center<br/>
center<br/>
center<br/>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
运行效果：
image.png
网友评论