css响应式布局 兼容ie6

1、两栏布局  左侧定宽   右侧自适应

1 2 3 4

< div  class = "grid1" >      < div  class = "left_1" >左侧定宽</ div >      < div  class = "right_1" >右侧自适应</ div > </ div >

1 2	.left_ 1 { float : left ;  width : 200px ;} .right_ 1 { margin-left : 200px ;}

2、两栏布局  左侧自适应   右侧定宽

1 2 3 4

< div  class = "grid2 clearfix" >      < div  class = "left_2" >左侧自适应</ div >      < div  class = "right_2" >右侧定宽</ div > </ div >

1 2	.left_ 2 { float : left ;  width : 100% ;  margin-right : -200px ;} .right_ 2 { float : right ;  width : 200px ;}

3、三栏布局   两侧定宽   中间自适应

1 2 3 4 5

< div  class = "grid3 clearfix" >      < div  class = "left_3" >左侧定宽</ div >      < div  class = "center_3" >中间自适应</ div >      < div  class = "right_3" >右侧定宽</ div > </ div >

1 2 3 4

.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、三栏布局   左侧自适应   中间和右侧定宽

1 2 3 4 5

< div  class = "grid4 clearfix" >      < div  class = "left_4" >左侧自适应</ div >      < div  class = "center_4" >中间定宽</ div >      < div  class = "right_4" >右侧定宽</ div > </ div >

1 2	.center_ 4 , .right_ 4 { position : relative ;  float : right ;  width : 200px ;} .left_ 4 { float : left ;  width : 100% ;  margin-right : -400px ;}

5、三栏布局   左侧和中间定宽   右侧自适应

1 2 3 4 5

< div  class = "grid5" >      < div  class = "left_5" >左侧定宽</ div >      < div  class = "center_5" >中间定宽</ div >      < div  class = "right_5" >右侧自适应</ div > </ div >

1 2	.left_ 5 , .center_ 5 { position : relative ;  float : left ; width : 200px ;} .right_ 5 { margin-left : 400px ;}

以上写法可兼容5大浏览器，及IE6到IE8浏览器，具体代码参考附件

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1862698