Implementation method of multi-column layout in front-end development

This time I will bring you the implementation method of multi-column layout in front-end development. What are the precautions for implementing multi-column layout in front-end development. The following is a practical case, let's take a look.

Multiple column layout

Multi-column layout is also relatively common in web front-end development, such as the common three columns, four columns and above. The column layout allows a single page to display more categorized content. The multi-column layouts mentioned here include two columns with fixed width and one adaptive column, multiple columns with variable width and one adaptive column, and multi-column layout.

Two columns with fixed width and one column with adaptive layout

This layout mode is divided into three columns, two of which have a fixed width, and one column whose width changes with the width of the content.

Two columns of fixed width plus one adaptive column

In this case, the height of each column is adaptive, that is, the height is consistent with the height of the content. The width of the left column and the middle column is 100px, and the width of the right column is adaptive. It is achieved through floatfloating layout combined with the characteristics of block-level elements. accomplish. It should be noted that the background color can be set on the p tag or on the p tag.

Multiple columns with variable width plus one column adaptive

The case explained here is a highly adaptive layout scheme with two columns of variable width and one adaptive column,

Here are multiple columns of variable width plus one adaptive column

The first thing to understand is variable width. Variable width means that the width of the column can be set to other values ​​at any time. Here we can set the width of the column in the left column to any value without changing the layout mode, so we see The code to implement this layout is the same as above. What needs to be noted is the difference between variable width and adaptive width.

Multiple column equal parts

The multi-column layout is to display multiple columns on the page. The widths of these columns are consistent, the spacing is consistent, and the height is adaptive.

Easy implementation of multi-column distribution layout

Set margin-left to -20px on the parent container, add 20px to the width of the parent container, set left floating on the column container, and set the width of each child container to 25% of the parent container, and at the same time Set the subcontainer padding-left to 20px, and the display mode to border-box (the width and height of the box model displayed in this realistic mode are the width and height of the box). This solution achieves equal distribution by increasing the width of the parent container by 20px (gap width), displaying the spacing inside the child container, and setting the child container as a border box.

This article only lists the solutions to implement multi-column layout through float. There are also corresponding implementation solutions through flex, table, etc.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Implementation method of multi-column layout in front-end development. For more information, please follow other related articles on the PHP Chinese website!