CSS3 method of realizing waterfall flow layout

This time to everyone to bring CSS3 to realize the waterfall flow layout method, CSS3 to realize the waterfall flow layout of the points of attention, the following is the actual case, together to see.

Before using the waterfall flow to use JS, now with the CSS3, can be easily implemented.

Master points:

1. Column-count How many columns the text in P is divided into

2, column-width specified column width

3, column-gap specified column clearance

4, Break-inside:avoid; Avoid line breaks within elements and create new columns

Note: Internet Explorer 9 and earlier versions of IE browsers do not support the Column-count property.

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

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

The Column-gap property specifies the interval between columns:

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

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

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

Instance:

<!    DOCTYPE html>
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 makes a striped big background

CSS3 Text Gradient Animation

CSS3 mouse move into the picture dynamic prompt effect