css 布局如何去掉这种空白

Question

                </div>
       </div>
            </div>
  </div>
</div>

.w-container {
width: 100%;
margin: 0 auto;
}

.w-waterfall {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 0.25rem;
-webkit-column-gap: 0.25rem;
column-gap: 0.25rem;
width: 98%;
margin: auto;
}

.w-box {
margin: 0 0 0.2rem 0;
break-inside: avoid;
border-radius: 0.2rem;
background-color: #fff;
text-shadow: 0px 0px 10px #9d9d9d;
overflow: hidden;
box-sizing: border-box;
}

.w-pics1{max-height: 12rem;overflow: hidden;border-radius: 0.2rem 0.2rem 0 0;}

.imgBoxDiv1 img{width: 100%; margin-top: -60%; border: none; }

.imgBoxDiv1 { height: 0; width: 100%; padding: 60% 0; }

Answer 1

https://blog.csdn.net/weixin_42220533/article/details/82769695