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

This article mainly introduces the pure css how to achieve waterfall flow, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1.multi-column multi-column layout to realize waterfall flow

Let's first briefly talk about some of the attributes related to multi-column.

Column-count sets the number of columns

Column-gap sets the spacing between columns

Column-width sets the width of each column

It should also be combined with setting up break-inside in subcontainers to prevent unexpected interruptions in multi-column layout, paging media, and multi-area contexts

Break-inside attribute value

Auto specifies that page / column interruptions within an element are neither enforced nor prohibited.

Avoid specifies to avoid page breaks within elements.

Avoid-page specifies to avoid page breaks within elements.

Avoid-column specifies to avoid column interruptions within the element.

Avoid-region specifies to avoid area interruptions within the element.

Intercept the part, but fill it yourself.

/ * html file * /

Take your left hand and protect you.

Take your left hand and protect you.

Take your left hand and protect you.

Take your left hand and protect you.

Take your left hand and protect you.

/ * css style * /

Body {

Background:#e5e5e5

}

/ * outermost layer of waterfall flow * /

# root {

Margin:0auto

Width:1200px

Column-count:5

Column-width:240px

Column-gap:20px

}

/ * each column of pictures contains layers * /

.item {

Margin-bottom:10px

/ * prevent unexpected interruptions in multi-column layouts, paging media and multi-area contexts * /

Break-inside:avoid

Background:#fff

}

.item: hover {

Box-shadow:2px2px2pxrgba (0pr 0pl 0.5)

}

/ * Picture * /

.itemImg {

Width:100%

Vertical-align:middle

}

/ * the information under the picture contains layers * /

.userInfo {

Padding:5px10px

}

.avatar {

Vertical-align:middle

Width:30px

Height:30px

Border-radius:50%

}

.username {

Margin-left:5px

Text-shadow:2px2px2pxrgba (0penny 0penny .3)

}

Thank you for reading this article carefully. I hope the article "how to achieve Waterfall flow with Pure css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you 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.