<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
.pu {
margin: 0 auto;
column-count: 5; /*分为5列 自己设置*/
column-width: 300px; /*设置列宽,即是每列的宽度*/
column-gap: 10px; /*每列和每行的间距为10px 是 column-gap: 10px; row-gap: 10px; 的缩写*/
}
.inner {
break-inside: avoid; /*避免分隔符分开图片*/
margin-bottom: 10px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="pu">
<p class="inner"> <img src="1.webp" > </p>
<p class="inner"> <img src="1.webp" > </p>
<p class="inner"> <img src="1.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="1.webp" > </p>
<p class="inner"> <img src="1.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="2.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="3.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="4.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="6.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="11.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
<p class="inner"> <img src="12.webp" > </p>
</div>
</body>
</html>
