這次給大家帶來CSS雙飛翼布局的詳解,實現CSS雙飛翼布局的注意事項有哪些,下面就是實戰案例,一起來看一下。
雙飛翼布局,就是兩端固定寬高,中間自適應的三欄布局
先來張圖,左邊和右邊的灰色塊是固定寬高的,中間綠色的地區是寬高自適應
方式一:通過flex彈性布局來實現
看代碼
//HTML結構,p2是中間的自適應地區...<body> <p class="wrap"> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> </p></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^='p']{ // 給所有的p都加上高和邊框樣式,方便觀看,不然都縮成一條線了 height: 400px; border: 1px solid #f00;}.p1,.p3{ //給兩端的p固定的寬 width: 200px; background-color: #ccc; flex-shrink: 1; //預設是1,所以不用寫也沒事,寫出來自是表達這個意思}.p2{ background-color: #0f0; flex-grow:1; //這個比較重要,作用是讓第二個塊的寬度撐滿剩餘的空間}
方式二:通過定位來實現
HTML結構不變,看樣式
.wrap{ width: 100%; //同樣實現寬高100%鋪開 height: 100%; position: relative; //父層添加相對定位,讓子項目相對父層來定位}[class^='p']{ height: 400px; border: 1px solid #f00;}.p1,.p3{ position: absolute; width: 200px; background-color: #ccc;}.p1{ left: 0; //固定在父層的左側 top: 0;}.p3{ right: 0; //固定在父層的右側 top: 0;}.p2{ background-color: #0f0; /*這個是關鍵,我們沒有給中間的p2添加過寬屬性,所以預設佔用父層寬的100%, 由於兩側塊寬是固定的,所以中間的自適應塊左右分別200px的外邊距中間的content地區就會實現自適應*/ margin: 0 200px; }
效果
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
css3的Transition平滑過渡功能表列實現
類比心臟一秒一跳的效果