时间戳

首页 > 解决方案 > 如何删除gridview中不同大小之间的垂直空白？

css - 如何删除gridview中不同大小之间的垂直空白？

问题描述

我有不同高度的div。我想将它们放在没有任何空白区域的网格中。请关注下方。密码箱。

.container {
      display: flex;
      flex-wrap: wrap;
      width: 400px;
    } 
    
    .sm {
      height: 200px;
      background: gold;
      border: 1px solid black;
      width: 45%; 
    }
    
    .md {
      height: 250px;
      background: red;
      border: 1px solid black;
      width: 45%;
    }
   <div class="container">
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
            <div class="sm"></div>
            <div class="sm"></div>
            <div class="md"></div>
        </div>

标签： css

解决方案

当不同的盒子有不同的高度时，你不能删除空白。要删除垂直空格，请对所有框使用相似的高度。

您为 .container * 使用了边距。这为容器内的所有元素设置了边距。要删除水平空白，请不要为 .container * 使用边距。

推荐阅读