資訊專欄INFORMATION COLUMN
摘要：雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)方式一通過彈性布局來實(shí)現(xiàn)看代碼結(jié)構(gòu)，是中間的自適應(yīng)區(qū)域先簡(jiǎn)單粗暴的解決一下瀏覽器的默認(rèn)樣式使用，盒模型好計(jì)算，媽媽再
雙飛翼布局，就是兩端固定寬高，中間自適應(yīng)的三欄布局
先來張圖，左邊和右邊的灰色塊是固定寬高的，中間綠色的區(qū)域是寬高自適應(yīng)
方式一：通過flex彈性布局來實(shí)現(xiàn)看代碼
//HTML結(jié)構(gòu)，div2是中間的自適應(yīng)區(qū)域
...
...
*{ //先簡(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; //以沿主軸方向行顯示，不換行，從而來顯示3個(gè)塊
justify-content:space-around; //這一個(gè)加和不叫其實(shí)也沒事，加上去的意思就是兩端對(duì)齊
}
[class^="div"]{ // 給所有的div都加上高和邊框樣式，方便觀看，不然都縮成一條線了
height: 400px;
border: 1px solid #f00;
}
.div1,.div3{ //給兩端的div固定的寬
width: 200px;
background-color: #ccc;
flex-shrink: 1; //默認(rèn)是1，所以不用寫也沒事，寫出來自是表達(dá)這個(gè)意思
}
.div2{
background-color: #0f0;
flex-grow:1; //這個(gè)比較重要，作用是讓第二個(gè)塊的寬度撐滿剩余的空間
}
方式二：通過定位來實(shí)現(xiàn)
HTML結(jié)構(gòu)不變，看樣式
.wrap{
width: 100%; //同樣實(shí)現(xiàn)寬高100%鋪開
height: 100%;
position: relative; //父層添加相對(duì)定位，讓子元素相對(duì)父層來定位
}
[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)鍵，我們沒有給中間的div2添加過寬屬性，所以默認(rèn)占用父層寬的100%，
由于兩側(cè)塊寬是固定的，所以中間的自適應(yīng)塊左右分別200px的外邊距中間的content區(qū)域就會(huì)實(shí)現(xiàn)自適應(yīng)*/
margin: 0 200px;
}
效果
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51071.html
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：本文概要本文將介紹如下幾種常見的布局其中實(shí)現(xiàn)三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負(fù)可解決，下文會(huì)介紹雙飛翼布局特點(diǎn)同樣也是三欄布局，在圣杯布局基礎(chǔ)上進(jìn)一步優(yōu)化，解決了圣杯布局錯(cuò)亂問題，實(shí)現(xiàn)了內(nèi)容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...
摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對(duì)自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個(gè)知識(shí)輪廓。本篇中主要描述...
閱讀 1473·2023-04-25 16:31
閱讀 2070·2021-11-24 10:33
閱讀 2768·2021-09-23 11:33
閱讀 2562·2021-09-23 11:31
閱讀 2951·2021-09-08 09:45
閱讀 2365·2021-09-06 15:02
閱讀 2674·2019-08-30 14:21
閱讀 2341·2019-08-30 12:56
