1、兩欄布局 ?左側定寬 ? 右側自適應

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

2、兩欄布局 ?左側自適應 ? 右側定寬

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

3、三欄布局 ? 兩側定寬 ? 中間自適應

<div?class="grid3?clearfix"><div?class="left_3">左側定寬</div><div?class="center_3">中間自適應</div><div?class="right_3">右側定寬</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、三欄布局 ? 左側自適應 ? 中間和右側定寬

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

5、三欄布局 ? 左側和中間定寬 ? 右側自適應

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

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

轉載于:https://blog.51cto.com/dapengtalk/1862698

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。