使用 多列划分 属性： column-count: 5;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(253, 201, 201);
}
.box {
width: 95%;
margin: 0 auto;
/* background-color: rgb(241, 163, 163); */
/* 多列划分 */
column-count: 5;
/* background-image: url(img/a.png); */
}
.box>div {
border: 2px solid #ccc;
padding: 8px;
/* 不让多列的div折半显示,这个属性只应用在多列里面 */
break-inside: avoid;
margin-bottom: 15px;
}
.box>div>img {
width: 100%;
}
.box>div>p {
line-height: 30px;
text-align: center;
font-weight: bold;
color: slateblue;
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="img/1.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/2.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/3.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/4.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/5.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/6.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/7.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
<div>
<img src="img/8.jpg" alt="">
<p>往后余生，风雪是你</p>
</div>
</div>
</body>
</html>
![[css3] 多列布局案例_多列](/i/li/?n=2&i=images/blog/202212/21100755_63a26a7b41d239337.png?,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184 "在这里插入图片描述")