css中間自適應(yīng)布局的5種解法詳解
發(fā)布時(shí)間：2019-01-27 15:36:34 作者：huhaha24 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css中間自適應(yīng)布局的5種解法詳解的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
前言
在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。
問題：如何實(shí)現(xiàn)三欄布局（高度固定，左中右的結(jié)構(gòu)）
假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右寬度均為300px，中間自適應(yīng)。
看了上面的題目，有經(jīng)驗(yàn)的人也許會(huì)覺得很簡(jiǎn)單，仔細(xì)想想，如果我們來寫，能寫出幾種方案呢？一般都會(huì)想到兩種吧，float和position定位，其實(shí)除了這兩種外，還有3種可以寫，下面我就來一一介紹一下：
方案一（float浮動(dòng)）
<section class='layout float'>
<style>
.layout.float .left-right-center{
height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background-color: red;
}
.layout.float .right{
float: right;
width: 300px;
background-color: blue;
}
.layout.float .center{
background-color: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">我是中間的自適應(yīng)元素--浮動(dòng)</div>
</article>
</section>
- 原理：左右兩個(gè)div由于浮動(dòng)脫離了文檔流，center就會(huì)上移，造成三欄布局的效果（前提是高度相同）
- 優(yōu)點(diǎn)：兼容性高
- 缺點(diǎn)：需要清除浮動(dòng)來防止影響其他元素
- 如果高度不固定，中間的內(nèi)容會(huì)被撐開，左右兩邊不會(huì)一起撐開
方案二（絕對(duì)定位）
<section class="layout absolute">
<style>
.layout.absolute .left-center-right div{
position: absolute;
height: 100px;
}
.layout.absolute .left{
left: 0;
width: 300px;
background-color: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background-color: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
我是中間的自適應(yīng)元素--絕對(duì)定位
</div>
<div class="right"></div>
</article>
</section>
- 原理：利用絕對(duì)定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會(huì)有自適應(yīng)的效果
- 優(yōu)點(diǎn)：快捷
- 缺點(diǎn)：如果父元素脫離了文檔流，子元素一定會(huì)脫離文檔流，運(yùn)用的場(chǎng)景不多
- 如果中間元素的高度增加，兩邊元素的高度不會(huì)增加，所以只有中間的div會(huì)撐開
方案三（flex布局）
<section class="layout flex">
<style>
.layout.flex .left-center-right{
display: flex;
height: 100px;
}
.layout.flex .left{
width: 300px;
background-color: red;
}
.layout.flex .center{
flex: 1;
background-color: yellow;
}
.layout.flex .right{
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
我是中間的自適應(yīng)元素--flex布局
</div>
<div class="right"></div>
</article>
</section>
- 原理：將父元素設(shè)置為flex布局，然后中間元素設(shè)置flex為1，達(dá)到自適應(yīng)的效果
- 優(yōu)點(diǎn)：在實(shí)際開發(fā)中常用
- 缺點(diǎn)：IE8及以下的瀏覽器不支持
- 如果高度不固定，中間內(nèi)容的高度撐開后，兩邊也會(huì)隨之撐開
方案四（table布局）
<section class="layout table">
<style>
.layout.table .left-center-right{
display: table;
height: 100px;
width: 100%;
}
.layout.table .left{
display: table-cell;
width: 300px;
background-color: red;
}
.layout.table .center{
display: table-cell;
background-color: yellow;
}
.layout.table .right{
display: table-cell;
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
我是中間的自適應(yīng)元素--table
</div>
<div class="right"></div>
</article>
</section>
- 原理：將父元素設(shè)置為table布局，然后每個(gè)子元素都是teble-cell，給左右兩個(gè)格子設(shè)置固定的寬度，中間的格子就可以達(dá)到自適應(yīng)的效果
- 優(yōu)點(diǎn)：兼容性好，可做flex布局在ie8以下的代替
- 缺點(diǎn)：局限性
- 如果高度不固定，中間被撐開時(shí)，左右兩邊也會(huì)被撐開，和flex類似
方案五（網(wǎng)格布局）
<section class="layout grid">
<style>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;/*每一格都是100px高*/
grid-template-columns: 300px auto 300px;/*左右兩格都是300px，中間是自適應(yīng)*/
}
.layout.grid .left{
background-color: red;
}
.layout.grid .center{
background-color: yellow;
}
.layout.grid .right{
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
我是中間的自適應(yīng)元素--grid布局
</div>
<div class="right"></div>
</article>
</section>
- 原理：將父元素設(shè)置為網(wǎng)格布局，然后規(guī)定每格的高度以及每格的寬度，只用分別給每格單獨(dú)設(shè)置顏色即可
- 優(yōu)點(diǎn)：技術(shù)比較新，方便
- 缺點(diǎn)：兼容性不是很好
- 如果高度不固定，中間元素添加文本，也不會(huì)撐開
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
css實(shí)現(xiàn)兩欄固定中間自適應(yīng)的方法
這篇文章主要介紹了css實(shí)現(xiàn)兩欄固定中間自適應(yīng)的方法，主要介紹了4種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-29
css 兩邊固定中間自適應(yīng)布局的實(shí)現(xiàn)
這篇文章主要介紹了css 兩邊固定中間自適應(yīng)布局的實(shí)現(xiàn)，介紹了四種常用方法以及原理：浮動(dòng)、浮動(dòng)內(nèi)嵌 div、定位、flex。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-17- CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-27
CSS布局實(shí)例:上中下三行,中間自適應(yīng)-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
上中下三行布局，上下定高，中間欄自適應(yīng)瀏覽器高度，且內(nèi)容垂直居中。 firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 測(cè)試通過。 對(duì)于2008-10-17
