Css adaptive layout implementation

Instance

The code is as follows:

Copy code

<Style type = "text/css"> Body, div, h3, p {margin: 0; padding: 0 ;} . Fl {float: left; display: inline ;} . Fr {float: right; display: inline ;} . Cl {clear: both ;} . Container {width: 250px; margin: 60px auto 0 ;} . Col_rigid {width: 62px; height: 62px; float: left; background: url('gh.png ');} . Col_flexible {margin-left: 72px ;} </Style> The following is the subject <Div class = "container"> <Div class = "col_rigid"> </div> <Div class = "col_flexible"> adaptive right width: modify the container width. </Div> </Div> <Div class = "container"> <Div class = "col_rigid"> </div> <Div class = "col_flexible"> <Div> <H3 class = "fl"> I float left <Div class = "cl"> </div> </Div> <P> content </p> </Div> </Div>

The Html code is just two div:

The code is as follows:	Copy code
<Div class = "col_rigid"> </div> <Div class = "col_flexible"> </div>

The Css code has two classes:

The code is as follows:	Copy code
. Col_rigid {width: 62px; height: 62px ;} . Col_flexible {margin-left: 72px ;}

The effect is shown in the following figure:

This implementation is very concise, but some negative problems need to be noted.

Suppose we want to achieve the following results:

 

We usually need to clear the elements under the floating element. The code is written as follows:

 

The code is as follows:	Copy code
<Div class = "col_rigid"> </div> <Div class = "col_flexible"> <Div> <H3 class = "fl"> I float left <Div class = "cl"> </div> </Div> <P> content </p> </Div>

Unexpectedly, the code does not work in the way we want, and its rendering effect is as follows:
 

As shown in Figure 1-3, the actual result is that the content behind the floating element in the right column is cleared to the bottom of the left column, resulting in a large blank area after the floating element in the right column. This is not a bug in IE or a browser, but the html standard. For details, see the new method for clearing floating in my translated articles.

That is to say, in the right column we cannot use clear floating, so how can we achieve the effect of the image we want 1-2? You can fix the height on the div element of the floating row in the right column. The code is as follows:

The code is as follows:	Copy code
<Div class = "col_rigid"> </div> <Div class = "col_flexible"> <Div style = "height: 30px;"> <H3 class = "fl"> I float left </Div> <P> content </p> </Div>

Conclusion: When adaptive, we only need to change the display of the div to display: inline. In this way, we can use float: left and ri to float the left and right, in this way, as long as the width does not exceed the width of the parent container, the adaptive layout of the two columns can be realized.