您好,登錄后才能下訂單哦!
本篇文章為大家展示了css怎么實(shí)現(xiàn)中間自適應(yīng)布局,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
問題:如何實(shí)現(xiàn)三欄布局(高度固定,左中右的結(jié)構(gòu))
假設(shè)高度已知,請寫出三欄布局,其中左右寬度均為300px,中間自適應(yīng)。
看了上面的題目,有經(jīng)驗(yàn)的人也許會覺得很簡單,仔細(xì)想想,如果我們來寫,能寫出幾種方案呢?一般都會想到兩種吧,float和position定位,其實(shí)除了這兩種外,還有3種可以寫,下面我就來一一介紹一下:
方案一(float浮動)
<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)元素--浮動</div> </article> </section>
原理:左右兩個div由于浮動脫離了文檔流,center就會上移,造成三欄布局的效果(前提是高度相同)
優(yōu)點(diǎn):兼容性高
缺點(diǎn):需要清除浮動來防止影響其他元素
如果高度不固定,中間的內(nèi)容會被撐開,左右兩邊不會一起撐開
方案二(絕對定位)
<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)元素--絕對定位 </div> <div class="right"></div> </article> </section>
原理:利用絕對定位以及寬度,將左右兩邊的div固定住,中間div的寬度就會有自適應(yīng)的效果
優(yōu)點(diǎn):快捷
缺點(diǎn):如果父元素脫離了文檔流,子元素一定會脫離文檔流,運(yùn)用的場景不多
如果中間元素的高度增加,兩邊元素的高度不會增加,所以只有中間的div會撐開
方案三(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)容的高度撐開后,兩邊也會隨之撐開
方案四(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布局,然后每個子元素都是teble-cell,給左右兩個格子設(shè)置固定的寬度,中間的格子就可以達(dá)到自適應(yīng)的效果
優(yōu)點(diǎn):兼容性好,可做flex布局在ie8以下的代替
缺點(diǎn):局限性
如果高度不固定,中間被撐開時(shí),左右兩邊也會被撐開,和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):兼容性不是很好
如果高度不固定,中間元素添加文本,也不會撐開
上述內(nèi)容就是css怎么實(shí)現(xiàn)中間自適應(yīng)布局,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。