css左側欄固定右側欄寬度自適應程式碼例項
本章節分享一段程式碼例項,它實現了左側一欄寬度固定,右側一欄寬度自適應效果。
大家可以自行調節一下瀏覽器的寬度測試效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } .layout { padding-left: 200px; } .layout .layout-left { width: 200px; margin-left: -200px; float: left; height: 400px; background-color: #ccc; } .layout .layout-right { width: 100%; float: left; height: 400px; background-color: #999; } </style> </head> <body> <div class="layout"> <div class="layout-left"></div> <div class="layout-right"></div> </div> </body> </html>
相關文章
- 左欄尺寸固定右欄寬度自適應程式碼例項
- css左欄固定右欄寬度自適應CSS
- 兩欄佈局,左側可伸縮,右側寬度自適應
- 實現左側固定寬度, 右側自適應的兩欄佈局常見方法
- 七種實現左側固定,右側自適應兩欄佈局的方法
- CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應)CSS
- css實現左欄固定右欄自適應,高度自適應的佈局CSS
- css佈局之左側固定右側自適應佈局CSS
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- css經典佈局之左側固定大小右側自動適應CSS
- 左側固定,右側自適應的佈局方式理解margin負值理論
- flex一欄寬度固定一欄寬度自適應佈局Flex
- css實現的左右兩側寬度固定中間自適應可變程式碼CSS
- 左側固定,右側自適應的佈局方式(新增評論區大佬教的方法)
- CSS3 div從左側滑入效果程式碼例項CSSS3
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- 網頁固定側欄的做法網頁
- css水平元素寬度自適應均勻排列程式碼例項CSS
- 點選側邊欄展開和收縮程式碼例項
- 側欄能夠定位的導航選單程式碼例項
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- JavaScript 側欄選項卡JavaScript
- div+css 常用三種自動適應寬度分欄CSS
- 固定寬度下,CSS 實現自適應文字CSS
- css實現兩欄固定中間自適應CSS
- input文字框實現寬度自適應程式碼例項
- css實現的左右兩列寬度固定中間寬度自適應CSS
- 中間寬度自適應的三列布局程式碼例項
- css側邊一排小孔程式碼例項CSS
- CSS實現的側欄三級導航選單程式碼CSS
- Bootstrap 4 實現導航欄右側對齊boot
- 微軟推出全新Win10 App Project Newsbar:桌面右側新聞側邊欄微軟Win10APPProject
- Flutter drawer側邊欄Flutter
- css多欄佈局程式碼例項CSS
- Win10資料夾右側資訊欄怎麼關閉?Win10資料夾右側資訊欄的關閉方法Win10
- Win10 隱藏左側邊側欄(導航視窗)中的資料夾Win10
- css之左邊定寬右邊自適應CSS
- 側欄導航自動定位效果詳解