css三列一列寬度自適應效果
分享一段程式碼例項,它實現了三列效果。
並且可以實現列的寬度自適應效果,自己調整視窗的尺寸檢視效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box { width: 700px; margin: 0 auto; border: 1px solid; overflow: hidden; } .box-left { width: 220px; background: red; height: 300px; float: left; } .box-middle { margin-left: 220px; margin-right: 150px; } .box-right { width: 150px; float: right; height: 300px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="box-left"></div> <div class="box-right"></div> <div class="box-middle"></div> </div> </body> </html>
相關文章
- 一列寬度固定一列寬度自適應佈局
- 一列居中寬度自適應佈局
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- CSS實現圖片寬度自適應CSS
- UMeditor寬度自適應
- 固定寬度下,CSS 實現自適應文字CSS
- css左欄固定右欄寬度自適應CSS
- CSS左右兩欄寬度自適應中間一欄寬度固定CSS
- css實現的左右兩列寬度固定中間寬度自適應CSS
- CSS 自適應內容寬度的輸入框CSS
- css浮動元素寬度根據內容自適應CSS
- input文字框寬度自適應
- css--常見左右盒子寬度高度自適應佈局CSS
- div+css 常用三種自動適應寬度分欄CSS
- 三列寬度自適應佈局
- React根據寬度自適應高度React
- css水平元素寬度自適應均勻排列程式碼例項CSS
- flex一欄寬度固定一欄寬度自適應佈局Flex
- 兩列居中寬度自適應佈局
- xib 控制元件寬度自適應控制元件
- css之左邊定寬右邊自適應CSS
- 簡單的Css控制bootstrap內容頁面的img寬度自適應CSSboot
- 如何獲取寬度自適應的元素的width寬度值
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- css三列自適應佈局效果CSS
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- HTML流動佈局各種寬度自適應HTML
- Qt QTableWidget 最後一覽自適應寬度QT
- CSS實現寬高等比例自適應矩形CSS
- 【css】table標籤內的td、th如何設定固定寬度,而不是自適應?CSS
- css實現的左右兩側寬度固定中間自適應可變程式碼CSS
- 前端頁面高度和寬度自適應怎麼做?前端
- flex三列布局中間寬度自適應佈局Flex
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- CSS 圖片固定長寬比實現高度自適應CSS
- 一列固定寬度居中佈局
- 微信小程式 – 富文字圖片寬度自適應(正則)微信小程式
- flutter根據給定寬度自適應縮放字型大小Flutter