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

This article mainly explains "what are the methods of css3 to achieve multi-column layout", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the methods of css3 to achieve multi-column layout"?

The method of realizing multi-column layout by css3: 1, using float to realize multi-column layout, 2, using inline-block box model to realize multi-column layout, 3, using "display: flex" elastic layout to realize multi-column layout, and 4, using "display: table" mode to realize multi-column layout.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Several ways to realize Multi-column layout by css

If the following three div are displayed on the same line

1 2 3

Implementation of multi-column layout with 1:float

The float property controls whether and how the target HTML component floats. When this property is set, the object is treated as a block component. There are four values for float: left (floating to the left), Right (floating to the right), none (not floating), and inherit (inheriting the value of the parent element). Set box1,box2,box3 to float to the left. If the next sibling element of the floating element is also set to the same floating direction, it will be displayed immediately after the change element.

When float is set, the element is detached from the normal document stream. Their parent element will not be stretched out either, so the height of # parent is 0 at this time.

# parent > div {border:1px solid black; float:left; width:200px; height:200px; text-align: center;} # box1 {background-color:red;} # box2 {background-color:yellow;} # box3 {background-color:blue;}

We can also do this by setting box1,box2 to float to the left and box3 not to float. Because box1,box2 sets the float and then leaves the normal document stream. For box3, just as there is no box1,box2 in front of it, box3 will also be displayed on this line, but will be obscured by box1. Set the margin-left:400px; of the box3 to make it look like it is displayed behind the box1,box2. At this time # parent is supported by box3, and the height is 202px at this time.

# parent > div {border:1px solid black; width:200px; height:200px; text-align: center;} # box1 {float:left; background-color:red;} # box2 {float:left; background-color:yellow;} # box3 {margin-left:400px; background-color:blue;}

2:inline-block box model

The elements of the inline-block box model do not occupy a row, and the width and height can be specified with width and height. Display:inline-block renders the object as an inline object, but the contents of the object are rendered as block objects. Subsequent inline objects are arranged on the same line. You usually need to set up the vertical-align:top to align its top.

# parent > div {display:inline-block; border:1px solid black; width:200px; height:200px; text-align: center;} # box1 {background-color:red;} # box2 {background-color:yellow;} # box3 {background-color:blue;}

There will be spacing between elements rendered horizontally in inline-block, in the case of newline display or space separation. Removing the space will naturally disappear, so that the interval will not be displayed.

one hundred and twenty three

3:display: flex elastic layout

Setting the diaplay:flex; parent container of the # parent container is equivalent to an elastic box. The div inside will be arranged according to the mode set by flex-direction. Flex flexible layout is more powerful, providing maximum flexibility for the box model to implement complex layouts, and any container can be specified as a Flex layout. The flex-direction attribute determines the direction of the principal axis, flex-direction: row; indicates that it is arranged horizontally in the parent container, and flex-direction: column; indicates that it is arranged vertically in the parent container.

# parent {display: flex; flex-direction: row;} # parent > div {border:1px solid black; width:200px; height:200px; text-align: center;} # box1 {background-color:red;} # box2 {background-color:yellow;} # box3 {background-color:blue;}

4:display: table

Display:table sets the element of this attribute to be displayed as a block-level table, similar to.

An element with this attribute set by display:table-cell is displayed as a table cell, similar to

You can use this series of table-row-group, table-header-group, table-footer-group, table-row, and so on to achieve a table-like layout with other tags.

# parent {display:table;} # parent > div {display:table-cell; border:1px solid black; width:200px; height:200px; text-align: center;} # box1 {background-color:red;} # box2 {background-color:yellow;} # box3 {background-color:blue } at this point, I believe you have a deeper understanding of "what are the methods of css3 to achieve multi-column layout". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.