纯css砌体视图：删除可变高度div之间的所有（垂直）空白

我有宽度相等但高度可变的div，但是下面代码中的div之间有垂直空白（特别是div49），我如何使div在页面顶部对齐，并在垂直和水平方向上相互填充（基本上在div之间删除尽可能多的空白）

寻找一个纯CSS解决方案（如果有的话）

.boxx{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：60px；
位置：相对位置；
溢出：隐藏；
显示：内联块；
/*浮动：左*/
}
.boxx2{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：120px；
位置：相对位置；
溢出：隐藏；
显示：内联块；
/*浮动：左*/
}

第5.1款
第49课
第1.1部分
第二组
第一组
第三组
第99课
第88课
div77

删除HTML代码中的换行符：

.boxx{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：60px；
位置：相对位置；
溢出：隐藏；
显示：内联块；
/*浮动：左*/
}
.boxx2{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：120px；
位置：相对位置；
溢出：隐藏；
显示：内联块；
/*浮动：左*/
}

第5.1DIV491.1div2div1div3div99div88div77部分

试试这个..可能有用

---

给出

字体大小：0到父元素，因为如果使用
显示：内联块字体大小：0到父元素。
只需为boxx和boxx2类添加负边距即可

.boxx, boxx2{
margin: -2px
}

有解决办法

使用flexbox

.grid{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：100vw；
最大高度：800px；
}
img{
宽度：33.3%；
保证金：5px；
}
您尝试过浮点数吗。试试这个，也许这对你有帮助


.boxx{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：60px；
位置：相对位置；
溢出：隐藏；
显示：内联块；
浮动：左；
}
.boxx2{
边界半径：5px；
边框：5px实心#AACAF7；
填充：10px；
背景色：#eee；
宽度：200px；
高度：120px；
位置：相对位置；
溢出：隐藏；
浮动：左；
}

第5.1款
第49课
第1.1部分
第二组
第一组
第三组
第99课
第88课
div77
内联元素受中间空格的影响。这会使div稍微靠近一点，但仍然留下大面积的空白，请查看更新后的图片，更好地解释这个问题。恐怕没有纯CSS解决方案（但我不确定）。也许这是好的。@AndyTschiersch你错了，有CSS解决方案）看我的答案。