css三列自適應佈局效果
分享一段程式碼例項,它實現了三列布局,並且中間一列寬度自適應,兩端寬度固定。
程式碼例項如下:
[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; } .left { width: 200px; height: 500px; background: #ccc; position: absolute; top: 0; left: 0; } .middle { height: 500px; background: #333; } .right { width: 300px; height: 500px; background: #999; position: absolute; top: 0; right: 0; } </style> </head> <body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body> </html>
相關文章
- CSS佈局 --- 自適應佈局CSS
- css自適應佈局CSS
- 【HTML / CSS】使用position自適應佈局HTMLCSS
- css佈局之左側固定右側自適應佈局CSS
- rem自適應佈局REM
- 三欄佈局之自適應佈局
- CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應)CSS
- css實現左欄固定右欄自適應,高度自適應的佈局CSS
- css佈局,左右固定中間自適應實現CSS
- 三列自適應佈局(聖盃佈局)
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- iPhone 6的自適應佈局iPhone
- css--常見左右盒子寬度高度自適應佈局CSS
- CSS-佈局2-中間固定兩邊自適應CSS
- 兩列自適應佈局方案整理
- 三列寬度自適應佈局
- display:table-cell自適應佈局
- easyui-layout佈局高度自適應UI
- Web自適應佈局那些事兒Web
- css經典佈局之左側固定大小右側自動適應CSS
- CSS Grid 網格佈局實現自適應9宮格CSS
- 兩列居中寬度自適應佈局
- QT Creator/QT Designer佈局自適應QT
- 頁面佈局自適應之@media screen
- 一列居中寬度自適應佈局
- 2020-12-17 html、css面試題3: 水平垂直居中,左右固定中間自適應 三欄佈局,靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局,IE中常見的相容性問題,清空陣列的方法HTMLCSS面試題陣列
- 移動端web自適應適配佈局解決方案Web
- 學習筆記:自適應佈局,多螢幕適配筆記
- 構建Android自適應佈局應用方案解析Android
- flex佈局兩邊固定寬 中間自適應Flex
- HTML流動佈局各種寬度自適應HTML
- 移動端自適應佈局的最好工具-remREM
- css三列一列寬度自適應效果CSS
- flex三列布局中間寬度自適應佈局Flex
- 利用@media screen實現網頁佈局的自適應網頁
- css3的flex實現的響應式佈局效果CSSS3Flex
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS