瀑布流有很多种实现方式,本次使用css3的 column-count 方式来实现。
官方说明:http://www.w3school.com.cn/cssref/pr_column-count.asp
本次具体案例:
部分css:
.contentimg { width: 100%; margin: 5px auto; -webkit-column-count: 2; column-count: 2; column-gap: 5px; -webkit-column-gap: 5px; list-style-type: none; } .contentimg li { background-color: rgb(175, 0, 3); padding: 5px; margin-top: 10px; padding-bottom: 30px; color: white; } .contentimg li img { margin-bottom: 5px; /*position: relative;*/ }
效果: