雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局
先來(lái)張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)
方式一：通過(guò)flex彈性布局來(lái)實(shí)現(xiàn)
看代碼
//HTML結(jié)構(gòu)，div2是中間的自適應(yīng)區(qū)域
...
<body>
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
...
*{ //先簡(jiǎn)單粗暴的解決一下瀏覽器的默認(rèn)樣式
margin: 0;
padding: 0;
border: 0;
box-sizing:border-box; //使用border-box，盒模型好計(jì)算，媽媽再也不用擔(dān)心我算不清塊寬高了
}
.wrap{
width: 100%;
height: 100%;
display: flex; //使用彈性布局
flex-flow:row nowrap; //以沿主軸方向行顯示，不換行，從而來(lái)顯示3個(gè)塊
justify-content:space-around; //這一個(gè)加和不叫其實(shí)也沒(méi)事，加上去的意思就是兩端對(duì)齊
}
[class^='div']{ // 給所有的div都加上高和邊框樣式，方便觀看，不然都縮成一條線了
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{ //給兩端的div固定的寬
width: 200px;
background-color: #ccc;
flex-shrink: 1; //默認(rèn)是1，所以不用寫(xiě)也沒(méi)事，寫(xiě)出來(lái)自是表達(dá)這個(gè)意思
}
.div2{
background-color: #0f0;
flex-grow:1; //這個(gè)比較重要，作用是讓第二個(gè)塊的寬度撐滿剩余的空間
}
方式二：通過(guò)定位來(lái)實(shí)現(xiàn)
HTML結(jié)構(gòu)不變，看樣式
.wrap{
width: 100%; //同樣實(shí)現(xiàn)寬高100%鋪開(kāi)
height: 100%;
position: relative; //父層添加相對(duì)定位，讓子元素相對(duì)父層來(lái)定位
}
[class^='div']{
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{
position: absolute;
width: 200px;
background-color: #ccc;
}
.div1{
left: 0; //固定在父層的左側(cè)
top: 0;
}
.div3{
right: 0; //固定在父層的右側(cè)
top: 0;
}
.div2{
background-color: #0f0;
/*這個(gè)是關(guān)鍵，我們沒(méi)有給中間的div2添加過(guò)寬屬性，所以默認(rèn)占用父層寬的100%，
由于兩側(cè)塊寬是固定的，所以中間的自適應(yīng)塊左右分別200px的外邊距中間的content區(qū)域就會(huì)實(shí)現(xiàn)自適應(yīng)*/
margin: 0 200px;
}
效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。