一、效果图
二、代码
<!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>