<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流效果</title>
<style>
/*去除原有的外边框和内边距*/
*{
padding: 0;
margin: 0;
}
/*设置整体背景*/
body{
background: #ccc;
}
.list-group{
display: flex;/*布局模式为flex*/
flex-direction: column;/*排列方向为纵向*/
align-items: center;/*内部元素居中对齐*/
}
.item-list{
width: 100%;/*宽度占满屏幕*/
height: 440px;
display: flex;
flex-direction: row;/*排列方向为横向*/
justify-content: space-around;/*间距均匀对齐*/
}
.item{
width: 300px;
height: 400px;
margin-top: 40px;
}
.item img{
width: 300px;
height: 300px;
}
.item .content{
width: 300px;
height: 100px;
background: #eee;
text-align: center;
}
</style>
</head>
<body>
<div class="list-group">
<div class="item-list">
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
</div>
<div class="item-list">
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
</div>
<div class="item-list">
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
<div class="item">
<img src="image/sunset.jpg" alt="图片找不到">
<div class="content">
多少人爱你青春欢畅的时辰<br>
爱慕你的美丽,假意或真心<br>
只有一个人爱你虔诚的灵魂<br>
爱你苍老脸上的皱纹
</div>
</div>
</div>
</div>
</body>
</html>
效果图