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

2021-08-07 01:25:34 字數 918 閱讀 6314

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

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

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

div>

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

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

style=" margin-left:160px; background:#fc0">右側內容,自適應寬度div>

div>

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

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

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

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

div>

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

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

css兩列布局,右側固定,左側自適應寬度 divstyle width 90 margin 0 auto overflow auto display inline block divstyle width 200px float right background 090 這是右側的內容div div...

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

原理 外盒子的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...