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

This article mainly introduces how to achieve three-column layout of css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Three-column layout

The classical three-column layout consists of left, middle and right columns, which is characterized by fixed width of two consecutive columns, adaptive width of the remaining one column and fixed and equal height of the three columns. The following examples are fixed width of the left middle column and adaptive width of the right column, and vice versa. The overall implementation principle is consistent with the above two column layout.

In order to make the width of the right column adaptive, the method of float + margin-left is not used. If you use margin-left, you have to calculate the width of the left middle column.

Overflow + float

.three-column-layout {width: 400px; height: 400px; .left {float: left; width: 50px; height: 100%; background-color: # f66;} .center {float: left; width: 100px; height: 100%; background-color: # 66f;} .right {overflow: hidden; height: 100% Background-color: # 3c9;}}

Flex

.three-column-layout {display: flex; width: 400px; height: 400px; .left {width: 50px; background-color: # f66;} .center {width: 100px; background-color: # 66f;} .right {flex: 1; background-color: # 3c9 }} Thank you for reading this article carefully. I hope the article "how to achieve three-column layout of css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.