一列寬度固定一列寬度自適應佈局
容器元素的尺寸可能是不固定的,比如顯示器解析度的不同。
可能會導致頁面佈局出現各種各樣的問題,例如導致佈局錯亂。
所以需要根據父元素尺寸的不同,調整子元素的尺寸以做到最佳佈局效果。
這時候,一列寬度固定一列寬度自適應佈局的優勢就得以體現。
下面以左側div寬度固定,右側div寬度是自適應為例介紹一下如何實現此佈局。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold; } .left, .right { text-align: center; } .left{ width:200px; height: 600px; background: #ccc; position:absolute; left:0px; } .right{ height: 600px; background: #FCC; margin-left:200px; } </style> </head> <body> <div class="left">left</div> <div class="right">right</div> </body> </html>
上面程式碼實現左側div寬度固定,右側寬度自適應效果。
一.實現原理:
[CSS] 純文字檢視 複製程式碼body{ margin:0; padding:0; font-size:30px; font-weight:bold; }
將內外邊距都是設定為零0,設定字型大小和粗細,非常簡單,不用多說。
[CSS] 純文字檢視 複製程式碼.left{ width:200px; height: 600px; background: #ccc; position:absolute; left:0px; }
左側尺寸固定的元素,寬度是200px,以後也不再變動。
採用採用絕對定位,並且left屬性值為0。
那麼無論父元素如何縮放,它都會緊貼著父元素左壁
[CSS] 純文字檢視 複製程式碼.right{ height: 600px; background: #FCC; margin-left:200px; }
首先此元素沒有設定寬度,預設塊級元素在橫向上會盡量填充滿父元素。
又由於左側元素是絕對定位,按照理論,right元素會在橫向上填滿body元素,左側元素會覆蓋在它上面。
最後使用margin-left設定right元素的做外邊距,外邊距的值恰好是左側元素的寬度。
這樣實現了左右元素緊鄰,且右側元素寬度自適應。
二.相關閱讀:
(1).position屬性參閱CSS position:absolute 絕對定位一章節。
(2).margin屬性參閱CSS margin外邊距一章節。
相關文章
- 一列居中寬度自適應佈局
- 一列固定寬度居中佈局
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- flex一欄寬度固定一欄寬度自適應佈局Flex
- css三列一列寬度自適應效果CSS
- 三列寬度自適應佈局
- 兩列居中寬度自適應佈局
- Html佈局左右寬度固定中間自適應解決方案HTML
- 兩列居中寬度固定佈局
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- HTML流動佈局各種寬度自適應HTML
- css實現的左右兩列寬度固定中間寬度自適應CSS
- flex三列布局中間寬度自適應佈局Flex
- 固定寬度下,CSS 實現自適應文字CSS
- css左欄固定右欄寬度自適應CSS
- UMeditor寬度自適應
- flex佈局兩邊固定寬 中間自適應Flex
- css--常見左右盒子寬度高度自適應佈局CSS
- 實現左側固定寬度, 右側自適應的兩欄佈局常見方法
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- 兩欄佈局,左側可伸縮,右側寬度自適應
- input文字框寬度自適應
- 父盒子寬度不固定水平居中彈性佈局
- web前端學習筆記(CSS固定寬度佈局)Web前端筆記CSS
- 如何獲取寬度自適應的元素的width寬度值
- React根據寬度自適應高度React
- echarts圖示如何自適應寬度Echarts
- 左欄尺寸固定右欄寬度自適應程式碼例項
- 子元素固定寬度 父元素寬度被撐開
- 【echarts】柱狀圖設定固定寬度(最大寬度)Echarts
- CSS實現圖片寬度自適應CSS
- xib 控制元件寬度自適應控制元件
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- Android 使用 TableLayout 佈局拉伸寬度Android
- flutter 父級寬度不固定,子集多個元素自動填充的佈局方案方法Flutter
- [開發教程]第8講:Bootstrap把已有的固定寬度佈局轉換成響應式佈局boot
- CSS 自適應內容寬度的輸入框CSS
- Qt QTableWidget 最後一覽自適應寬度QT