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

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

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

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




    
    



    
    
        
            
            
        
    
    



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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115235.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

jindong 2019-08-01 18:28 評論0 收藏0