Shulou(Shulou.com)06/02 Report--

This article mainly explains "five ways to explain the three-column layout of CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "five ways to explain the three-column layout of CSS in detail".

Topic: assuming that the height is known, please write out the layout of three columns, in which the width of the left column and the right column are 300px, and the middle is adaptive.

Five schemes of three-column layout

This is a classic interview question. Here are 5 methods of css layout.

Three-column layout * {margin: 0; padding: 0;} 1. Float solution .layout.float article div {min-height: 80px;} .layout.float .left {width: 300px; background-color: red; float: left;} .layout.float .center {background-color: yellow;} .layout.float .right {width: float Background-color: blue; float: right;} three-column layout floating solution 1. This is a floating solution with three-column layout; 2. This is a floating solution with three-column layout; 3. This is a floating solution with three-column layout; 4. This is a floating solution with three-column layout; 5. This is a floating solution with three-column layout; 6. This is a floating solution with three-column layout; 2. Absolute positioning solution .layout.absolute article div {min-height: 80px; position: absolute;} .layout.absolute .left {width: 300px; background-color: red; left: 0;} .layout.absolute .center {background-color: yellow; left: 300px; right: 300px } .layout.absolute. Right {width: 300px; background-color: blue; right: 0;} three-column layout absolute positioning solution 1. This is the absolute positioning solution of three-column layout; 2. This is the absolute positioning solution of three-column layout; 3. This is the absolute positioning solution of three-column layout; 4. This is the absolute positioning solution of three-column layout; 5. This is the absolute positioning solution of three-column layout; 6. This is the absolute positioning solution of three-column layout. 3. Flexbox solution / * flexbox solution is blocked by the absolute positioning solution above when displayed in the browser. Set a margin-top * / .layout.flexbox {margin-top: 110px;} / * set the minimum height * / .layout.flexbox article div {min-height: 80px } .layout.flexbox article {display: flex;} .layout.flexbox .left {width: 300px; background-color: red;} .layout.flexbox .center {/ * center partial growth to fill the whole row * / flex: 1; background-color: yellow } .layout.flexbox. Right {width: 300px; background-color: blue;} three-column layout flexbox solution 1. This is a three-column flexbox solution; 2. This is a three-column flexbox solution; 3. This is a three-column flexbox solution; 4. This is a three-column flexbox solution; 5. This is a three-column flexbox solution; 6. This is a three-column flexbox solution; 4. Table layout solution .layout.table .left-center-right {width: 100%; min-height: 80px; display: table;} .layout.table. Left-center-right > div {display: table-cell;} .layout.table. Left {width: 300px; background-color: red } .layout.table .center {background-color: yellow;} .layout.table. Right {width: 300px; background-color: blue;} three-column layout table layout solution 1. This is the three-column layout of the table layout solution; 2. This is the three-column layout of the table layout solution; 3. This is a three-column layout table layout solution; 4. This is the three-column layout of the table layout solution; 5. This is a three-column layout table layout solution; 6. This is the three-column layout of the table layout solution; 5. Grid layout solution .layout.grid .left-center-right {width: 100%; display: grid; / * Grid row height * / grid-template-rows: 100px; / * Grid column width * / grid-template-columns: 300px auto 300px;} .layout.grid .left {background-color: red } .layout.grid .center {background-color: yellow;} .layout.grid. Right {background-color: blue;} three-column layout grid layout solution 1. This is the grid layout solution of three-column layout; 2. This is the grid layout solution of three-column layout; 3. This is the grid layout solution of three-column layout; 4. This is the grid layout solution of three-column layout; 5. This is the grid layout solution of three-column layout; 6. This is a grid layout solution for three-column layout.

Narrow the browser window and you can see the change. Because the height set in the above code is min-width, not the set fixed height width, what you see now is that the height is not fixed.

The analysis of five layout schemes showing different effects when the height is not fixed.

Floating solution: the center part is propped up by the content and expanded to both sides, and the size of the boxes on both sides is not affected.

In the absolute positioning solution: the center part will be propped up by the content, will not expand to both sides, and the box size on both sides will not be affected.

In the flexbox solution: the center part is propped up by the content, and the boxes on both sides are always the same as the height of the center.

This is because in the flex layout, the align-items property defaults to stretch, and if it is set to: align-items: center; or align-items: start; or align-items: end; or other values, it will not automatically remain the same high.

In the table layout solution: the center section is propped up by the content, and the boxes on both sides are always consistent with the height of the center.

Grid layout solution: the box size does not change, the text goes directly beyond the center part.

Thank you for your reading, the above is the content of "detailed explanation of the five methods of CSS three-column layout". After the study of this article, I believe you have a deeper understanding of the five methods of detailed interpretation of CSS three-column layout, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.