css is an indispensable language for our front-end development programmers. Being able to master css well can greatly improve front-end development work. This article mainly introduces the classic CSS three-column layout scheme and shares it with everyone.
Three-column layout, as the name suggests, is fixed on both sides and adaptive in the middle. 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:
At this time, you can get the distribution of the left and right columns:
Next let’s look at how to deal with the middle column. We know that for float elements, they will break away from the document flow, and other boxes will ignore this element. (But the text in other boxes will still make room for this element and surround it.) So at this time, you only need to add a normal p in the container container, which will ignore the left and right and fill the entire container. Just In addition, the margin is left right to flow out the space:
The effect you see at this time Yes: The left and right columns are squeezed into the second row. This is because main's width is 100%. Next, we put the left, center, and right in one line by adjusting the margins of the left and right 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;
}The second step is to put the left Set margin-left to -100%, and the left column will move to the beginning of the first row. Then set the margin-left of right to the negative value of its width: -100px, and the right column will also be moved to the same line as the left and middle columns:
However It’s not done yet, let’s try to add some text to main:
fjlskdjflkasjdfljasdljlsjdljsdjflksadj
You can see that the text is suppressed Okay, now we have to solve this problem.
The third step is to give the container a padding, which should be exactly equal to the width of the left and right columns:
.container {
padding-left: 100px;
padding-right: 100px;
}See this The result is that the left, middle, and right columns have all shrunk as a whole, but the text is still suppressed.
The fourth step is to add relative layout to the left and right columns, and then move them outward by setting the left and right values:
.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, you’re done:
4. Double flying wing layout
Double flying The first two steps of the wing layout are the same as the Holy Grail layout, except that the solution to the problem of the content in the middle column being blocked is different:
Since the content of the main part will be blocked, then add another one inside the main content, by setting its margin to avoid occlusion, the problem can be solved:
The only thing to note is that you need to add an element after main to clear floats.
5. Flex layout
Flex layout is the trend. It is also very simple to use flex to implement three-column layout, but you need to pay attention to browser compatibility:
fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
There are a few points to note:
main must be written first if it is to be loaded first, but because left needs to be displayed On the far left, so you need to set the left order to -1
The complete writing method of the flex attribute is: flex: flex-grow flex-shrink flex-basis. This is also the core of flex's three-column layout. Main sets flex-grow to 1, which means that all the extra space is given to main. When the space is not enough, only the left and right parts are reduced. At the same time, because the flex-basis of the left and right parts is specified, Increase the width of both to ensure the display effect
6. Absolute positioning
The absolute positioning method is also relatively simple and can be loaded first. Subject:
fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj
The above content is about six classic CSS three-column layout schemes. I hope it can help everyone.
Related recommendations:
Write HTML first or CSS first when laying out the web page
In the web page layout of HTML What is the difference between div and span