css上中下布局自適應(yīng)中間，左右布局自適應(yīng)左側(cè)display: table

Baaaan 發(fā)布于2019-08-30 13:00 / 1011人閱讀

摘要：在我們經(jīng)常用到固定頭部和底部，自適應(yīng)中間部分，或者固定左側(cè)，自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過(guò)絕對(duì)定位完成，具體可以網(wǎng)上去搜，這樣可以完成上中下的布局，但是這次基礎(chǔ)上再做左右布局浮動(dòng)會(huì)出現(xiàn)問(wèn)題，具體什么問(wèn)題我沒(méi)有深究。

在css我們經(jīng)常用到固定頭部和底部，自適應(yīng)中間部分，或者固定左側(cè)，自適應(yīng)右側(cè)等。在網(wǎng)上看了很多方法，一般都是通過(guò)絕對(duì)定位完成，position: absolute;具體可以網(wǎng)上去搜，這樣可以完成上中下的布局，但是這次基礎(chǔ)上再做左右布局浮動(dòng)會(huì)出現(xiàn)問(wèn)題，具體什么問(wèn)題我沒(méi)有深究。查閱一些資料后，發(fā)現(xiàn)了css的display屬性有個(gè)table值，可以根據(jù)這個(gè)做自適應(yīng)，做參考自己寫(xiě)了一下：




    
    



    
    
        
            
            
        
    
    



這段代碼實(shí)現(xiàn)了上下自適應(yīng)和左右自適應(yīng)，其中 具有display: table-row;     display:table-cell;屬性的div不固定高度或?qū)挾冗M(jìn)行自適應(yīng)，其中有幾點(diǎn)要注意，
1.請(qǐng)做自適應(yīng)的時(shí)候用div，這樣不指定寬度和高度，它會(huì)自動(dòng)填充父元素，這樣中間層就是div:parent - 100px -100px;
2.如果不加 這個(gè)div進(jìn)行包裹，left和right會(huì)被識(shí)別成和header，footer一個(gè)table內(nèi)的同級(jí)別元素，header，footer自會(huì)占用一列；
3.最有一點(diǎn)，請(qǐng)指定html，body height:100,這樣div就可以獲取到全屏的高度。

通過(guò)使用display我們就可以任意指定上下和左右自適應(yīng)，代碼簡(jiǎn)單，也不用js.
以上純屬本人觀(guān)點(diǎn)，如有錯(cuò)誤，敬請(qǐng)之處，大家共同進(jìn)步。

GPU云服務(wù)器云服務(wù)器 css自適應(yīng) css圖片自適應(yīng) asp 自適應(yīng)css 自適應(yīng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115235.html

相關(guān)文章

CSS+DIV自適應(yīng)布局

摘要：自適應(yīng)布局兩列布局左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應(yīng)占滿(mǎn)代碼如下左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應(yīng)占滿(mǎn)運(yùn)行結(jié)果如下圖兩欄布局左定寬，右自動(dòng)三列布局左中右三列，左右固定，中間自適應(yīng)占滿(mǎn)方法一左右浮動(dòng)，中間，中間在最后代碼如下左中右三列， CSS+DIV自適應(yīng)布局 1.兩列布局（左右兩側(cè)，左側(cè)固定寬度200px;右側(cè)自適應(yīng)占滿(mǎn)）代碼如下：左右...

sanyang 2019-08-02 10:53 評(píng)論0 收藏0
CSS+DIV自適應(yīng)布局

摘要：自適應(yīng)布局兩列布局左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應(yīng)占滿(mǎn)代碼如下左右兩側(cè)，左側(cè)固定寬度右側(cè)自適應(yīng)占滿(mǎn)運(yùn)行結(jié)果如下圖兩欄布局左定寬，右自動(dòng)三列布局左中右三列，左右固定，中間自適應(yīng)占滿(mǎn)方法一左右浮動(dòng)，中間，中間在最后代碼如下左中右三列， CSS+DIV自適應(yīng)布局 1.兩列布局（左右兩側(cè)，左側(cè)固定寬度200px;右側(cè)自適應(yīng)占滿(mǎn)）代碼如下：左右...

Cruise_Chan 2019-08-30 15:54 評(píng)論0 收藏0
有關(guān)于css的四種布局

摘要：四種布局左右兩側(cè)，左側(cè)固定寬度，右側(cè)自適應(yīng)占滿(mǎn)。上中下三行，頭部高，底部高，中間自適應(yīng)占滿(mǎn)。上下兩部分，底下這個(gè)固定高度，如果上面的內(nèi)容少，那么這個(gè)就固定在底部，如果內(nèi)容多，就把擠著往下走。代碼如下布局若有錯(cuò)誤請(qǐng)及時(shí)通知四種布局（1）、左右兩側(cè)，左側(cè)固定寬度200px，右側(cè)自適應(yīng)占滿(mǎn)。（2）、左中右三列，左右個(gè)200px固定，中間自適應(yīng)占滿(mǎn)。（3）、上中下三行，頭部200p...

khs1994 2019-08-02 10:55 評(píng)論0 收藏0
有關(guān)于css的四種布局

摘要：四種布局左右兩側(cè)，左側(cè)固定寬度，右側(cè)自適應(yīng)占滿(mǎn)。上中下三行，頭部高，底部高，中間自適應(yīng)占滿(mǎn)。上下兩部分，底下這個(gè)固定高度，如果上面的內(nèi)容少，那么這個(gè)就固定在底部，如果內(nèi)容多，就把擠著往下走。代碼如下布局若有錯(cuò)誤請(qǐng)及時(shí)通知四種布局（1）、左右兩側(cè)，左側(cè)固定寬度200px，右側(cè)自適應(yīng)占滿(mǎn)。（2）、左中右三列，左右個(gè)200px固定，中間自適應(yīng)占滿(mǎn)。（3）、上中下三行，頭部200p...

Steve_Wang_ 2019-08-30 15:54 評(píng)論0 收藏0
【CSS】三欄/兩欄寬高自適應(yīng)布局大全

摘要：方案一方案二和方案的有點(diǎn)是兼容性好因?yàn)槎际潜容^老的解決方案了缺點(diǎn)是之后需要清除浮動(dòng)造成的影響定位的話(huà)就是絕對(duì)定位之后脫離文檔流了你要注意用包裹一下方案三是目前移動(dòng)端主流的方案的語(yǔ)法缺點(diǎn)就是以下不支持。頁(yè)面布局注意方案多樣性、各自原理、各自?xún)?yōu)缺點(diǎn)、如果不定高呢、兼容性如何三欄自適應(yīng)布局,左右兩側(cè)300px,中間寬度自適應(yīng) (1) 給出5種方案方案一: float (左右浮動(dòng),中間...

jindong 2019-08-01 18:28 評(píng)論0 收藏0