CSS左右兩欄寬度自適應中間一欄寬度固定
更多的時候可能是設定左右兩欄寬度固定,中間一欄寬度自適應,不過本章節恰恰相反。
下面介紹一下如何實現中間一欄寬度固定,左右兩欄寬度自適應。
關於左右兩欄固定,左右寬度自適應參閱左右兩列寬度固定中間一欄寬度自適應程式碼例項一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } body{ font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px; } #header,#footer{ clear:both; padding:10px; text-align:center; } #left,#right{ float:left; width:50%; margin:0 0 0 -151px; } #innerLeft,#innerRight{ margin:0 0 0 151px; background-color:#efefef; } #middle{ float:left; width:300px; background-color:#ccc; } .inner{ padding:12px; text-align:center; font-size:12px; } </style> </head> <body> <div id="left"> <div id="innerLeft" class="inner">左側欄目</div> </div> <div id="middle"> <div id="innerMiddle" class="inner">中間欄目</div> </div> <div id="right"> <div id="innerRight" class="inner">右側欄目</div> </div> </body> </html>
上面的程式碼實現預期效果,中間欄目尺寸固定,兩端欄目寬度自適應效果。
相關文章
- css實現的左右兩列寬度固定中間寬度自適應CSS
- flex一欄寬度固定一欄寬度自適應佈局Flex
- css左欄固定右欄寬度自適應CSS
- 左右兩列寬度固定,中間一列寬度自適應程式碼例項
- css實現的左右兩側寬度固定中間自適應可變程式碼CSS
- css左側欄固定右側欄寬度自適應程式碼例項CSS
- 左欄尺寸固定右欄寬度自適應程式碼例項
- Html佈局左右寬度固定中間自適應解決方案HTML
- css實現兩欄固定中間自適應CSS
- 【CSS】三欄/兩欄寬高自適應佈局大全CSS
- 一列寬度固定一列寬度自適應佈局
- 固定寬度下,CSS 實現自適應文字CSS
- div+css 常用三種自動適應寬度分欄CSS
- 實現左側固定寬度, 右側自適應的兩欄佈局常見方法
- 兩欄佈局,左側可伸縮,右側寬度自適應
- css 實現圖片寬度自適螢幕,高度與寬度成固定比例CSS
- flex佈局兩邊固定寬 中間自適應Flex
- css--常見左右盒子寬度高度自適應佈局CSS
- UMeditor寬度自適應
- 兩列居中寬度自適應佈局
- CSS實現圖片寬度自適應CSS
- css三列一列寬度自適應效果CSS
- flex三列布局中間寬度自適應佈局Flex
- input文字框寬度自適應
- CSS 自適應內容寬度的輸入框CSS
- 兩列居中寬度固定佈局
- CSS自適應佈局(左右固定 中間自適應或者右側固定 左側自適應)CSS
- 如何獲取寬度自適應的元素的width寬度值
- css佈局,左右固定中間自適應實現CSS
- 三列寬度自適應佈局
- React根據寬度自適應高度React
- echarts圖示如何自適應寬度Echarts
- 一列居中寬度自適應佈局
- css浮動元素寬度根據內容自適應CSS
- 中間寬度自適應的三列布局程式碼例項
- 【css】table標籤內的td、th如何設定固定寬度,而不是自適應?CSS
- css實現左欄固定右欄自適應,高度自適應的佈局CSS
- 子元素固定寬度 父元素寬度被撐開