一、效果图
二、代码
<!DOCTYPE html>
<html>
<head>
<style>
/* https://www.cnblogs.com/bbc66/p/9434217.html */
html,body{
padding: 0;margin: 0;
}
.box {
padding: 10px;
/* display: flex;
flex-flow:column wrap; */
/* height: 100vh; */
column-count:2;
/*指定列宽*/
/* column-width:500px; */
/*指定列与列之间的间距*/
column-gap: 10px;
/*指定列与列之间间隙的样式*/
/*column-rule:2px dotted red*/
/*相对应下面的三个属性*/
/* column-rule-color:red;
column-rule-style:dotted;
column-rule-width:2px; */
}
.item {
/* margin: 10px; */
margin-bottom: 10px;
/* width: calc(100%/3 - 20px); */
height:300px;
}
.item img{
width: 100%;
height:100%;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="height: 200px;">
<img src="banner.jpg" alt="" />
</div>
<div class="item">
<img src="show.jpg" alt="" />
</div>
<div class="item" style="height: 120px;">
<img src="cloth.jpg" alt="" />
</div>
<div class="item" style="height: 500px;">
<img src="banner.jpg" alt="" />
</div>
<div class="item">
<img src="show.jpg" alt="" />
</div>
<div class="item">
<img src="cloth.jpg" alt="" />
</div>
<div class="item">
<img src="banner.jpg" alt="" />
</div>
<div class="item" style="height: 100px;">
<img src="show.jpg" alt="" />
</div>
<div class="item">
<img src="cloth.jpg" alt="" />
</div>
<div class="item">
<img src="show.jpg" alt="" />
</div>
<div class="item">
<img src="cloth.jpg" alt="" />
</div>
<div class="item">
<img src="banner.jpg" alt="" />
</div>
</div>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。