使用CSS怎么實現雙飛翼布局？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
方式一：通過flex彈性布局來實現
看代碼
//HTML結構，div2是中間的自適應區域 ... <body> <div class="wrap"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> ...
*{ //先簡單粗暴的解決一下瀏覽器的默認樣式
margin: 0;
padding: 0;
border: 0;
box-sizing:border-box; //使用border-box，盒模型好計算，媽媽再也不用擔心我算不清塊寬高了
}
.wrap{
width: 100%;
height: 100%;
display: flex; //使用彈性布局
flex-flow:row nowrap; //以沿主軸方向行顯示，不換行，從而來顯示3個塊
justify-content:space-around; //這一個加和不叫其實也沒事，加上去的意思就是兩端對齊
}
[class^='div']{ // 給所有的div都加上高和邊框樣式，方便觀看，不然都縮成一條線了
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{ //給兩端的div固定的寬
width: 200px;
background-color: #ccc;
flex-shrink: 1; //默認是1，所以不用寫也沒事，寫出來自是表達這個意思
}
.div2{
background-color: #0f0;
flex-grow:1; //這個比較重要，作用是讓第二個塊的寬度撐滿剩余的空間
}方式二：通過定位來實現
HTML結構不變，看樣式
.wrap{
width: 100%; //同樣實現寬高100%鋪開
height: 100%;
position: relative; //父層添加相對定位，讓子元素相對父層來定位
}
[class^='div']{
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{
position: absolute;
width: 200px;
background-color: #ccc;
}
.div1{
left: 0; //固定在父層的左側
top: 0;
}
.div3{
right: 0; //固定在父層的右側
top: 0;
}
.div2{
background-color: #0f0;
/*這個是關鍵，我們沒有給中間的div2添加過寬屬性，所以默認占用父層寬的100%，
由于兩側塊寬是固定的，所以中間的自適應塊左右分別200px的外邊距中間的content區域就會實現自適應*/
margin: 0 200px;
}看完上述內容，你們掌握使用CSS怎么實現雙飛翼布局的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
