Three-column layout, as the name implies is fixed on both sides, the middle self-adaptation. Three-column layout is very common in development
1. Float layout
The simplest three-column layout is to use float for layout. First, draw the left and right columns:
<style> . Left { float:left; width:100px; height:200px; background-color:red; } . Right { float:right; width:100px; height:200px; Background-color:yellow; } </style> <p class= "container" > <p class= "left" ></p> <p class= ' right ' ></p> <p class= "main" ></p> </p>Now you can get the left and right two columns distribution:
Let's look at how the middle column is handled. We know that for the float element, it will be out of the flow of the document, and the other boxes will ignore this element. (But the text in the other boxes will still give the element a place to wrap around.) So just add a normal p in the container container, which ignores left and right, and fills the entire container, just add margin to the left right to go out of space:
<style> . Left { float:left; width:100px; height:200px; background-color:red; } . Right { float:right; width:100px; height:200px; Background-color:yellow; } . Main { background-color:green; height:200px; margin-left:120px; margin-right:120px; } . container { border:1px solid black; } <p class= "Container" > <p class= "left" ></p> <p class= ' right ' ></p> <p class= "main" ></p> </p>Advantages: Simple
Disadvantage: The middle part last load, the content is more affected experience
2. BFC rules
The BFC (block formatting context) rule stipulates that BFC does not overlap with floating elements. So if you set the main element to a BFC element:
<style> . Left { float:left; width:100px; height:200px; background-color:red; } . Right { float:right; width:100px; height:200px; Background-color:yellow; } . Main { background-color:green; height:200px; Overflow:hidden; } <p class= "Container" > <p class= "left" ></p> <p class= ' right ' ></p> <p class= "main" ></p> </p>3. Holy Grail Layout
At the heart of the Grail layout is the left, center, and right three columns floating through float and then adjusted with a negative margin.
The first step is to look at the basic layout first
<style> . Left { float:left; width:100px; height:200px; background-color:red; } . Right { float:left; width:100px; height:200px; Background-color:yellow; } . Main { float:left; width:100%; height:200px; Background-color:blue; } </style> <body> <p class= "container" > <p class= "main" ></p> <p class= "left" ></p> <p class= "right" ></p> </p> </body>The effect is as follows: the left and right columns are squeezed to the second row. This is because the width of main is 100%. Next we will put left, middle, and right in one line by adjusting the margin of the left and right two columns:
. Left { float:left; width:100px; height:200px; Margin-left: -100%; background-color:red; } . Right { float:left; width:100px; height:200px; Margin-left: -100px; Background-color:yellow; }In the second step, the left Margin-left is set to-100%, at which point it moves to the first row header. Then the margin-left of right is set to a negative value of its width: -100px, the left column will also be moved to and from the top and bottom columns:
But it's not done yet, so let's try adding some text to main:
<body> <p class= "container" > <p class= "main" >fjlskdjflkasjdfljasdljlsjdljsdjflksadj </p> <p class= "left" ></p> <p class= "right" ></p> </p> </body>
You can see that the text is pressed, and the next thing you need to do is solve it.
The third step, give container a padding, the padding should be exactly equal to the left and right column width:
. container { padding-left:100px; padding-right:100px; }At this point the result is left, middle, and right three columns are overall contraction, but the text is still pressed.
The fourth step is to add a relative layout to the left and right columns, and then move outward by setting the leave and value:
. Left { float:left; width:100px; height:200px; Margin-left: -100%; position:relative; Left: -100px; background-color:red; } . Right { float:left; width:100px; height:200px; Margin-left: -100px; position:relative; Right: -100px; Background-color:yellow; }So far, done:
4. Double Wing Layout
The first two steps of the two-wing layout are the same as the Grail layout, except that the solution to the Middle column section is obscured by the problem:
Since the main part of the content will be obscured, then in main inside add a content, by setting its margin to avoid occlusion, the problem can be solved:
<! DOCTYPE html>The only thing to note is that you need to add an element behind main to clear the float.
5. Flex Layout
Flex layout is a trend, and using flex to achieve a three-column layout is simple, but you need to be aware of browser compatibility:
<style type= "Text/css" >. container {display:flex; Flex-direction:row; }. middle {height:200px; background-color:red; Flex-grow:1; }. Left {height:200px; Order:-1; margin-right:20px; Background-color:yellow; flex:0 1 200px; }. Right {height:200px; margin-left:20px; Background-color:green; flex:0 1 200px; } </style>There are a few points to note:
Main to load first must be written in the first bit, but because left needs to be displayed on the leftmost side, so you need to set the order to 1
The full wording of the Flex attribute is: Flex:flex-grow flex-shrink flex-basis. This is also the core of the flex implementation of the three-column layout, main set Flex-grow to 1, indicating that the extra space is all to main, and when the space is not enough, only to narrow left the right part, and because the left right part of the flex-basis is specified, So the width of the two is specified, and the display effect is guaranteed.
6. Absolute positioning
The absolute positioning method is also relatively simple, and it is possible to load the main body first:
<style type= "Text/css" >. Container {}. middle {position:a Bsolute; left:200px; right:200px; height:300px; Background-color:yellow; }. Left {position:absolute; left:0px; width:200px; height:300px; background-color:red; }. Right {Position:absolute; right:0px; width:200px; Background-color:green; height:300px; } </style>The above content on six kinds of CSS classic three-column layout scheme, hope to help everyone.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
