CSS雙飛翼布局的兩種方式實(shí)現(xiàn)示例

2024-07-11 08:58:34

字體：大中小

供稿：網(wǎng)友

雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局

先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)

方式一：通過flex彈性布局來實(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>...

*{  //先簡單粗暴的解決一下瀏覽器的默認(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;  //以沿主軸方向行顯示，不換行，從而來顯示3個塊    justify-content:space-around;  //這一個加和不叫其實(shí)也沒事，加上去的意思就是兩端對齊}[class^='div']{  // 給所有的div都加上高和邊框樣式，方便觀看，不然都縮成一條線了    height: 400px;    border: 1px solid #f00;}.div1,.div3{  //給兩端的div固定的寬    width: 200px;    background-color: #ccc;    flex-shrink: 1; //默認(rèn)是1，所以不用寫也沒事，寫出來自是表達(dá)這個意思}.div2{    background-color: #0f0;    flex-grow:1;  //這個比較重要，作用是讓第二個塊的寬度撐滿剩余的空間}

方式二：通過定位來實(shí)現(xiàn)

HTML結(jié)構(gòu)不變，看樣式

.wrap{    width: 100%;  //同樣實(shí)現(xiàn)寬高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;  //固定在父層的左側(cè)    top: 0;}.div3{    right: 0;  //固定在父層的右側(cè)    top: 0;}.div2{    background-color: #0f0;    /*這個是關(guān)鍵，我們沒有給中間的div2添加過寬屬性，所以默認(rèn)占用父層寬的100%，     由于兩側(cè)塊寬是固定的，所以中間的自適應(yīng)塊左右分別200px的外邊距中間的content區(qū)域就會實(shí)現(xiàn)自適應(yīng)*/    margin: 0 200px;  }

效果