CSS Responsive layout compatible IE6

1, two columns layout left fixed width right adaptive

<div class= "Grid1" > <div class= "left_1" > Left fixed width </div> <div class= "right_1" > Right adaptive </DIV>&L T;/div>

. left_1{float:left; width:200px;}. right_1{margin-left:200px;}

2. Two columns layout left adaptive right width

<div class= "Grid2 clearfix" > <div class= "left_2" > Left adaptive </div> <div class= "right_2" > Right fixed width </d Iv></div>

. left_2{float:left; width:100%; margin-right:-200px;}. Right_2{float:right; width:200px;}

3, three-column layout on both sides of the fixed width of the middle adaptive

<div class= "Grid3 clearfix" > <div class= "left_3" > Left fixed width </div> <div class= "center_3" > Intermediate Adaptive </ div> <div class= "Right_3" > Right width </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, three columns layout left adaptive middle and right width

<div class= "Grid4 clearfix" > <div class= "Left_4" > Left adaptive </div> <div class= "center_4" > Middle fixed width </ div> <div class= "Right_4" > Right width </div></div>

. center_4,. right_4{position:relative; float:right; width:200px;}. Left_4{float:left; width:100%; margin-right:-400px;}

5, three columns layout left and middle fixed width right adaptive

<div class= "GRID5" > <div class= "left_5" > Left fixed width </div> <div class= "center_5" > Middle width </div> <div class= "Right_5" > Right adaptive </div></div>

. left_5,. center_5{position:relative; float:left;width:200px;}. right_5{margin-left:400px;}

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/88/FF/wKioL1gEiOCw4T5nAAAaIBFZeqk983.png "title=" Qq20161017160747.png "alt=" Wkiol1geiocw4t5naaaaibfzeqk983.png "/>

The above is compatible with 5 large browsers, and IE6 to IE8 browser, specific code reference accessories

This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1862698

CSS Responsive layout compatible IE6