1、兩欄布局 ?左側(cè)定寬 ? 右側(cè)自適應(yīng)

<div?class="grid1"><div?class="left_1">左側(cè)定寬</div><div?class="right_1">右側(cè)自適應(yīng)</div> </div>.left_1{float:left;?width:200px;} .right_1{margin-left:200px;}

2、兩欄布局 ?左側(cè)自適應(yīng) ? 右側(cè)定寬

<div?class="grid2?clearfix"><div?class="left_2">左側(cè)自適應(yīng)</div><div?class="right_2">右側(cè)定寬</div> </div>.left_2{float:left;?width:100%;?margin-right:-200px;} .right_2{float:right;?width:200px;}

3、三欄布局 ? 兩側(cè)定寬 ? 中間自適應(yīng)

<div?class="grid3?clearfix"><div?class="left_3">左側(cè)定寬</div><div?class="center_3">中間自適應(yīng)</div><div?class="right_3">右側(cè)定寬</div> </div>.left_3,?.right_3{position:relative;?float:left;?width:200px;} .left_3{margin-right:-200px;} .right_3{margin-left:-200px;} .center_3{float:left;?width:100%;}

4、三欄布局 ? 左側(cè)自適應(yīng) ? 中間和右側(cè)定寬

<div?class="grid4?clearfix"><div?class="left_4">左側(cè)自適應(yīng)</div><div?class="center_4">中間定寬</div><div?class="right_4">右側(cè)定寬</div> </div>.center_4,?.right_4{position:relative;?float:right;?width:200px;} .left_4{float:left;?width:100%;?margin-right:-400px;}

5、三欄布局 ? 左側(cè)和中間定寬 ? 右側(cè)自適應(yīng)

<div?class="grid5"><div?class="left_5">左側(cè)定寬</div><div?class="center_5">中間定寬</div><div?class="right_5">右側(cè)自適應(yīng)</div> </div>.left_5,?.center_5{position:relative;?float:left;width:200px;} .right_5{margin-left:400px;}

以上寫(xiě)法可兼容5大瀏覽器，及IE6到IE8瀏覽器，具體代碼參考附件

轉(zhuǎn)載于:https://blog.51cto.com/dapengtalk/1862698

總結(jié)

以上是生活随笔為你收集整理的css响应式布局 兼容ie6的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。