Adaptive layout of three columns in the absolute positioning method:
The code is as follows: |
Copy code |
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> absolute positioning method </title> <Style> . Parent { Margin: auto; Background: # 09F; Position: relative; } . Left { Width: 200px; Height: 200px; Background: #369; Position: absolute; Left: 0; Top: 0; } . Right { Width: 250px; Height: 200px; Background: # C0C; Position: absolute; Right: 0; Top: 0; } . Center { Background: # F00; Margin: 0 250px 0 200px; Height: 200px; } </Style> </Head> <Body> <Div class = "parent"> <Div class = "center"> </div> <Div class = "left"> </div> <Div class = "right"> </div> </Div> </Body> </Html> |
Note: Three div elements can be interchangeable.
Self-floating method, three-column layout adaptive:
The code is as follows: |
Copy code |
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> floating method </title> <Style> . Parent { Margin: auto; Background: # 09F; } . Left { Width: 200px; Height: 200px; Background: #369; Float: left; } . Right { Width: 250px; Height: 200px; Background: # C0C; Float: right; } . Center { Background: # F00; Margin: 0 250px 0 200px; Height: 200px; } </Style> </Head> <Body> <Div class = "parent"> <Div class = "left"> </div> <Div class = "right"> </div> <Div class = "center"> </div> </Div> </Body> </Html> |
Note: the div of the. center must appear after. left and. right. The positions of. left and. right can be exchanged.
The margin negative value method is adaptive to the three-column layout:
The code is as follows: |
Copy code |
<! Doctype html> <Html> <Head> <Meta charset = "utf-8"> <Title> margin negative value method </title> <Style> . Parent { Margin: auto; Background: # 09F; } . Left { Width: 200px; Height: 200px; Background: #369; Margin-left:-100%; } . Right { Width: 250px; Height: 200px; Background: # C0C; Margin-left:-250px; } . Center { Background: # F00; Width: 100%; } . Main { Margin: 0 250px 0 200px; Height: 200px; } . Fl { Float: left; } </Style> </Head> <Body> <Div class = "parent"> <Div class = "center fl"> <Div class = "main"> Main </div> </Div> <Div class = "left fl"> </div> <Div class = "right fl"> </div> </Div> </Body> </Html> |
Note:. main is the middle topic part, which is placed at the top of the list and loaded first; element packages must exist outside. main and the width is 100%;