How to realize Waterfall flow with Pure css
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!
