css上中下布局自適應中間，左右布局自適應左側display: table

Baaaan 發布于2019-08-30 13:00 / 977人閱讀

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

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




    
    



    
    
        
            
            
        
    
    



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

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

云服務器 GPU云服務器 css自適應 css圖片自適應 asp 自適應css 自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115235.html

CSS+DIV自適應布局

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

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

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

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

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

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

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

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

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

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