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

This article will explain in detail how to use css3 multi-column layout columns for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

In css3, the multi-column layout columns is used to set the width and number of columns for each column of an object, which is an abbreviated attribute. The first parameter sets the width of the column of the element, and the second parameter sets the number of columns of the element. The syntax is "columns: column-width column-count;".

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

The usage of css3 multi-column layout columns

The columns property is an abbreviated property that sets the column width and number of columns.

The syntax is:

Columns: column-width column-count

The width of the column-width column.

Number of column-count columns.

Sets or retrieves the number of columns and the width of each column of an object

Examples are as follows:

{columns:100px 3;-webkit-columns:100px 3; / * Safari and Chrome * /-moz-columns:100px 3; / * Firefox * /}

Note: the columns property does not support Internet Explorer 9 and earlier browsers.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Output result:

This is the end of this article on "how to use css3 multi-column layout columns". 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.