How to implement Multi-column layout in css

The knowledge of this article "how to achieve multi-column layout in css" is not understood by most people, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve multi-column layout in css" article.

one。 Fixed width + adaptive

Expected effect: fixed width on the left, adaptive width on the right

Common code:

Html:

Left menu

Right item1 right item2 right item3

Css:

Html, body, p, ul, li {margin: 0; padding: 0;} div.left {background: # d2e3e3;} div.right {background: # 77DB;}

Option 1: float

.left {float: left; width: 100px;} .right {margin-left: 100px; / / or overflow: hidden}

Option 2: table

.parent {display: table; width: 100%; table-layout: fixed; / / https://blog.csdn.net/qq_36699230/article/details/80658742 .left, .right {display: table-cell;} .left {width: 100px;}}

Option 3: flex

.parent {display: flex; .left {width: 100px; / / or flex: 00 100px;} .right {flex: 1;}}

The above scheme can be used for two (more) columns with fixed width + adaptive layout, and the setting for the middle column is consistent with that of the first column.

Variable width (two or more columns) + adaptive layout can be used. The setting of the middle column is consistent with that of the first column. The difference is that the width does not need to be specially set. Special attention should be paid to the situation when using table layout, as follows:

.parent {display: table; width: 100%; / / setting table-layout: fixed; will make the cell equal in width, so the .left, .right {display: table-cell;} .left {width: 0.1%; / / width is not set to a minimum. Since table-layout: fixed; is not set, the width is determined by the content. }}

two。 Equal width (two / multiple columns) layout

Common code:

Html

one

two

three

four

Css

Html, body, div, p {margin: 0; padding: 0;} .parent {width: 800px; border: 1px solid coral; .column {height: 30px; background: bisque; p {background: # f0b979; height: 30px;}

Plan 1: float (I don't like it, it's very hard to write, I need to know how many columns there are, and it will exceed the container if there is a border.)

.parent {margin-left:-20px; overflow: hidden; .column {float: left; width: 25%; padding-left: 20px; box-sizing: border-box;}}

Option 2: flex (recommended)

.parent {display: flex; .column {flex: 1; & + .column {margin-left: 10px;}

three。 Contour layout

Recommended options:

Parent {display: flex;} .left, .right {flex: 1;} above is about "how to implement multi-column layout in css". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.