css3之瀑布流

最新推荐文章于 2021-08-06 15:53:53 发布

liuguichenglove

最新推荐文章于 2021-08-06 15:53:53 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： html5+css3

本文链接：https://blog.youkuaiyun.com/liuguichenglove/article/details/84812661

html5+css3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用 CSS3 的 column-count 属性来实现瀑布流布局的方法，并提供了具体的 CSS 代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果：