css实现瀑布流效果

最新推荐文章于 2024-09-09 12:23:47 发布

佛系小菜鸡

最新推荐文章于 2024-09-09 12:23:47 发布

阅读量233

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40224261/article/details/104181915

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

多列

在css3中，可以创建多列对文本或者区域进行布局

属性：
column-count:列的数量
column-gap:列之间的距离
column-rule: 列之间线的颜色，宽度等

用多列实现瀑布流效果

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用多列实现瀑布流效果</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="box">
			<div class="img">
				<img src="../img/img4.jpg" >
				<p>这是图片描述</p>
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			<div class="img">
				<img src="../img/img5.jpg" >
			</div>
			<div class="img">
				<img src="../img/img6.jpg" >
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			<div class="img">
				<img src="../img/img3.jpg" >
			</div>
			<div class="img">
				<img src="../img/img5.jpg" >
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			<div class="img">
				<img src="../img/img3.jpg" >
			</div>
			<div class="img">
				<img src="../img/img4.jpg" >
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			<div class="img">
				<img src="../img/img6.jpg" >
			</div>
			<div class="img">
				<img src="../img/img5.jpg" >
			</div>
			<div class="img">
				<img src="../img/img6.jpg" >
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			<div class="img">
				<img src="../img/img3.jpg" >
			</div>
			<div class="img">
				<img src="../img/img4.jpg" >
			</div>
			<div class="img">
				<img src="../img/img2.jpg" >
			</div>
			
		</div>
	</body>
</html>

css代码

*{
	margin: 0px;
	padding: 0;
}
body{
	background-color: #e8e8e8;
}
#box{
	column-width: 200px;/* 定义列宽度 */
	-webkit-column-width: 200px;/* 为了兼容老版本的浏览器,该样式可以让chrome、safari浏览器支持 */
	column-gap: 10px;/* 定义之列之间的间隔距离 */
	-webkit-column-gap: 10px;

}

.img img{
	width: 200px;
	height: auto;
	
}
.img{
	/* padding: 10px; */
	background-color: white;
	margin-bottom: 10px;
	text-align: center;
	padding: 5px;
}