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

This article will explain in detail what are the methods of the three-column layout of CSS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

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 above absolute positioning solution 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.

This is the end of this article on "what are the methods of the three-column layout of CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.