双飞翼就是为了实现三列布局:左右固定,中间自适应;切浏览器会自上而下的出现中间部分。
下面我们来看下效果:
<div class="box">
<div class="center">
<!-- 创建一个div 开造 -->
<div class="inner"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
.box {
width: 100%;
height: 300px;
background: darkblue;
margin: 0 auto;
}
.center {
width: 100%;
height: 100%;
float: left;
}
.inner {
margin: 0;
}
.left {
width: 200px;
height: 100%;
background: darkgoldenrod;
float: left;
margin-left:-100%;
}
.right {
width: 200px;
height: 100%;
background: darkred;
float: left;
margin-left: -200px; }
1.给三个盒子float:left,
2.设置中间盒子width:100%,这个宽度是相对于父元素而言的,所以父元素是相对于浏览器而言宽度100%,
3.浮动特点就是这一行占满了就容不下其他元素了,只要宽度可以挤下就能挤进来,所以就是设置负边距让左右两边的盒子挤进来。