This article introduces the CSS classic three-column layout scheme, share to everyone, but also to make a note for themselves, as follows:
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> <div class= "container" > <div class= "left" ></div> <div class= " Right "></div> <div class=" main "></div> </div>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 div inside 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; } <div class= "Container" > <div class= "left" ></div> <div class= "right" ></div > <div class= "main" ></div> </div>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; } <div class= "Container" > <div class= "left" ></div> <div class= "right" ></div > <div class= "main" ></div> </div>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> <div class= "container" > <div class= "main" ></div> <div class= "left" ></div> <div class= "right" ></div> </div></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> <div class= "container" > <div class= "main" > fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div> <div class= "left" ></div> <div class= " Right "></div> </div></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:
Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!
Related reading:
HTML5 how to make a picture in circles animation effect
How to implement mobile-side page scaling in H5
How to implement 3D Dynamic chart chart with H5 canvas
H5 filereader Distribution Read how files should be used and how they are introduced
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
