兩列居中寬度自適應佈局
兩列居中寬度固定佈局可以參閱兩列居中寬度固定佈局一章節。
首先介紹一下實現此佈局的主要原理:
(1).通過百分比設定main父元素的寬度,這樣就可以隨著瀏覽器縮放而縮放。
(2).利用margin:0 auto設定main居中顯示。
(3).通過浮動,將left元素和right元素並排顯示。
(4).通過百分比設定left和right子元素的寬度,並且兩者寬度值之和是100%,保證填充滿main。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { margin: 0; padding: 0; font-size: 30px; font-weight: bold; } .main, .left, .right { line-height: 50px; text-align: center; } .main { width: 80%; height: 600px; margin:0 auto } .left { width: 20%; height: 600px; background: #ccc; float: left; } .right { width: 80%; height: 600px; background: #FCC; float: right; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
視覺上left和right的居中,實質上是main元素的居中,通過百分比寬度實現自適應。
相關閱讀:
(1).設定寬度參閱CSS 元素尺寸一章節。
(2).div居中參閱CSS 設定div居中效果一章節。
(3).浮動參閱CSS float浮動一章節。
相關文章
- 一列居中寬度自適應佈局
- 兩列居中寬度固定佈局
- 三列寬度自適應佈局
- 一列寬度固定一列寬度自適應佈局
- flex三列布局中間寬度自適應佈局Flex
- 一列固定寬度居中佈局
- 兩列自適應佈局方案整理
- flex一欄寬度固定一欄寬度自適應佈局Flex
- 兩欄佈局,左側可伸縮,右側寬度自適應
- flex佈局兩邊固定寬 中間自適應Flex
- HTML流動佈局各種寬度自適應HTML
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- css實現的左右兩列寬度固定中間寬度自適應CSS
- css--常見左右盒子寬度高度自適應佈局CSS
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- 三列自適應佈局(聖盃佈局)
- Html佈局左右寬度固定中間自適應解決方案HTML
- 實現左側固定寬度, 右側自適應的兩欄佈局常見方法
- css三列自適應佈局效果CSS
- CSS佈局 --- 自適應佈局CSS
- css三列一列寬度自適應效果CSS
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- UMeditor寬度自適應
- 父盒子寬度不固定水平居中彈性佈局
- css自適應佈局CSS
- rem自適應佈局REM
- 三欄佈局之自適應佈局
- input文字框寬度自適應
- gridview自動適應列寬View
- React根據寬度自適應高度React
- iPhone 6的自適應佈局iPhone
- 2020-12-17 html、css面試題3: 水平垂直居中,左右固定中間自適應 三欄佈局,靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局,IE中常見的相容性問題,清空陣列的方法HTMLCSS面試題陣列
- CSS-佈局2-中間固定兩邊自適應CSS
- css佈局之左側固定右側自適應佈局CSS
- QTableWidget行高列寬自適應QT
- 中間寬度自適應的三列布局程式碼例項
- CSS實現圖片寬度自適應CSS
- xib 控制元件寬度自適應控制元件