div css 常用三種自動適應寬度

2021-06-28 15:15:27 字數 2569 閱讀 2515

css兩列布局,右側固定,左側自適應寬度

<divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<divstyle="width:200px; float:right; background:#090">這是右側的內容div>

<divstyle=" margin-right:210px; background:#f33">這是左側的內容,自適應寬度div>

div>

css兩列布局,左側固定,右側自適應寬度

<divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<divstyle="width:150px; float:left; background:#6f0">這是左側的內容固定寬度div>

<divstyle=" margin-left:160px; background:#fc0">中間內容,自適應寬度div>

div>

css三列布局,左右寬度固定,中間自適應寬度

<divstyle="width:90%; margin:0 auto; overflow:auto; _display:inline-block;">

<divstyle="width:200px; float:right; background:#393"> 這是右側的內容固定寬度div>

<divstyle="width:150px; float:left; background:#f60 ">這是左側的內容固定寬度div>

<divstyle=" margin-left:160px;margin-right:210px; background:#6c3;">中間內容,自適應寬度div>

div>

overflow:auto; _display:inline-block; 是清除浮動的,_display:inline-block;針對ie6的。

div+css 布局一行兩列,左列固定寬度,右列自適應寬度;設定最小寬度,視窗小的時候顯示滾動條;firefox ie測試通過.

下面兩句很重要的.百分比情況下視窗人為縮小的時候布局混亂問題就解決了.

.divglobal,.divtop,.divbottom

.divmainleft

.divmainright

top

div css 常用三種自動適應寬度分欄

style width 90 margin 0 auto overflow auto display inline block style width 200px float right background 090 這是右側的內容div style margin right 210px backg...

左右定寬,中間自適應布局三種方式

原理 外盒子的padding left right 的相對定位 clear center 中間 left 左邊 right 右邊步驟 1.在主體內部外面巢狀了乙個div 2.center在結構上靠前 3.center,left,right都浮動 4.清除浮動 給巢狀的主題外部加乙個偽元素 after...

自適應布局的三種方式

高度自適應 利用position定位 div class top 200px div div class main 自適應 div div class bottom 200px div html,body.top.main.bottom 寬度自適應 第一種 利用position定位 div clas...