css3之 瀑布流

瀑布流有很多种实现方式,本次使用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;*/
}

   效果:



 

猜你喜欢

转载自lgclove1314.iteye.com/blog/2312133