兩種方式實現CSS雙飛翼布局

ghnor 發布于2019-08-01 17:17 / 2409人閱讀

摘要：雙飛翼布局，就是兩端固定寬高，中間自適應的三欄布局先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區域是寬高自適應方式一通過彈性布局來實現看代碼結構，是中間的自適應區域先簡單粗暴的解決一下瀏覽器的默認樣式使用，盒模型好計算，媽媽再

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

先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區域是寬高自適應

方式一：通過flex彈性布局來實現

看代碼

//HTML結構，div2是中間的自適應區域
...

    
          
        
        
    

...

*{  //先簡單粗暴的解決一下瀏覽器的默認樣式  
    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;  
}

效果

云服務器 GPU云服務器雙飛翼布局序列化兩種方式域名解析的兩種主要方式為 css布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51071.html

幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0
前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0