How to implement the classic three-column layout of CSS-CSS Tutorial-php.cn

This time I will show you how to implement the classic three-column layout of CSS. What are theprecautionsfor implementing the classic three-column layout of CSS? The following is a practical case, let’s take a look.

This article introduces the classic CSS three-column layout scheme, share it with everyone, and make a note for yourself. The details are as follows:

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, let’s draw the left and right columns:

Copy after login

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 div in the container container, which will ignore the left and right and fill the entire container. Just In addition, the margin is left right and the space flows out:

Copy after login

The effect you see at this time is: the left and right columns are squeezed into the second row. This is because main's width is 100%. Next, we adjust the margins of the left and right columns to put the left, middle, and right in one line:

.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; }

Copy after login

The second step is to set the margin-left of left to -100%. At this time, the left The 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:

But we are not done yet, let’s try Add some text to main:

  fjlskdjflkasjdfljasdljlsjdljsdjflksadj

Copy after login

You can see that the text is suppressed, and we need to solve this problem next.

The third step is to give the container a padding. The padding should be exactly equal to the width of the left and right columns:

.container { padding-left: 100px; padding-right: 100px; }

Copy after login

The results you see at this time are left, middle and right. The columns have 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; }

Copy after login

So far, you’re done:

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!