Html 如何在两个不同高度的柱上相邻显示图像

我有以下问题。我希望能够在两列中显示图像库。这些图像有不同的高度。我试过用砖石方法计算柱数。这很管用，但问题是，当我调整网站大小时，它需要在1栏中显示所有内容。。但是图像的顺序不一样，因为我使用的是列而不是行

这就是我正在使用的代码

。左{
浮动：左；
宽度：45%；
保证金：1px；
}
.对{
浮动：对；
宽度：45%；
}
.测试{
边缘底部：10px；
}
.测试：之后{
清除：左；
}
img{
最大宽度：100%；
高度：自动；
}

我在下图中显示的问题。

因此，图像7应显示在图像5下，图像8应显示在图像7当前所在的位置

我做错了什么？必须只有CSS，没有JS

如果我使用列计数，那么问题是当它响应时。。它按以下顺序显示图像1、3、5、8、2、4、6、7，而不是1、2、3

---

谢谢

不要清除

：之后的浮动，而是在元素本身上

示例

.test:nth-of-type(2n+1) {
    clear: left;
}

你确定吗？我做了一个测试用例：这样就行了，但问题是你能看到块4和块6之间的差距吗。。。。我想把6号调高。。。刚好低于4。。差距太大了