CSS3 Tutorial-Multiple columns

Hello! Little friends, our last article CSS3 Tutorial-animation knowledge have you finished digesting it? The new multi-column layout (multi-column) in CSS3 is a powerful extension of the block layout pattern in traditional HTML Web pages. This new syntax allows web front-end developers to easily make text appear in multiple columns.

CSS3 Multiple columns:

With CSS3, you can create multiple columns to lay out your text – just like a newspaper!

In this chapter, you will learn the following multi-column properties:

1, Column-count;

2, Column-gap;

3, Column-rule.

Browser support:

Internet Explorer 10 and Opera support multi-column properties.

Firefox needs a prefix-moz-.

Chrome and Safari need a prefix of-webkit-.

Note: Multi-column properties are not supported in Internet Explorer 9 and earlier versions.

CSS3 Create multiple columns:

The Column-count attribute specifies the number of columns that the element should be delimited:

Instance:

Separate the text in the DIV element into three columns:

Div{-moz-column-count:3;/* Firefox */-webkit-column-count:3;/* Safari and Chrome */column-count:3;}

CSS3 Specifies the interval between columns:

The Column-gap property specifies the interval between columns:

Instance:

Specify a 40-pixel interval between columns:

div{-moz-column-gap:40px;/* Firefox */-webkit-column-gap:40px;/* Safari and Chrome */column-gap:40px;}

CSS3 Column Rules:

The Column-rule property sets the width, style, and color rules between columns.

Instance:

Specify the width, style, and color rules between columns:

div{-moz-column-rule:3px outset #ff0000;/* Firefox */-webkit-column-rule:3px outset #ff0000;/* Safari and Chrome */colum n-rule:3px outset #ff0000;}

New multi-Column properties:

The following table lists all the conversion properties:

The above is CSS3 Tutorial-multi-column content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

