CSS3 Multi-column and waterfall flow effect sample code

This article describes the CSS3 Multi-column and waterfall flow effect sample code

CSS3 content chunking, multi-column effects (similar to newspaper section layout):

. p02{    /*count: Content divided into several columns, gap: The distance between the content and the dividing line, rule: Split Line style */    column-count:4;    column-gap:30px;    column-rule:5px outset #ff0000;    -webkit-column-count:4;    -webkit-column-gap:30px;    -webkit-column-rule:5px outset #ff0000;}

CSS3 to achieve picture Waterfall flow layout:

. container {    column-width:350px;    -webkit-column-width:350px;    column-gap:5px;    -webkit-column-gap:5px;} img {    width:400px;}. Container p {    width:350px;    margin:5px;} p {    text-align:center;}

The waterfall flow effect HTML code is as follows:

<!        DOCTYPE html>