雙飛翼就是為了實現(xiàn)三列布局:左右固定缨该,中間自適應岸裙;切瀏覽器會自上而下的出現(xiàn)中間部分。
下面我們來看下效果:
<div class="box">
<div class="center">
<!-- 創(chuàng)建一個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; }
css.png
1.給三個盒子float:left没隘,
2.設置中間盒子width:100%,這個寬度是相對于父元素而言的,所以父元素是相對于瀏覽器而言寬度100%禁荸,
3.浮動特點就是這一行占滿了就容不下其他元素了右蒲,只要寬度可以擠下就能擠進來阀湿,所以就是設置負邊距讓左右兩邊的盒子擠進來。