Html 带列排序的图像网格

我想在网格中显示几个具有固定宽度和动态高度以及特定垂直和水平边距的图像（甚至其他内容）

如何在不对HTML标记中的项目进行排序的情况下实现某种排序？目前，我按照从上到下的升序读取数字，一列接一列。我想一行接一行地从左到右读数字

.grid{
线高：0；
-webkit列数：3；
-webkit列间距：0；
-moz列数：3；
-moz列间距：0；
列数：3；
列间距：0；
}
.电网img{
宽度：100%！重要；
高度：自动！重要；
}

给定的标记顺序

所需的显示顺序和上面的标记

---

我不知道这是否适用于可变高度。但是我猜

列

只能垂直对齐，不能水平对齐。所以我认为答案应该是图像上的

float:left

和

display:inline block

。我已经尝试了一种基于float的解决方案。但我的网格中出现了不希望出现的间隙。如果你有一个没有缺口的解决方案，那就太好了。因为据我所知，这个问题没有解决方案。可能重复：我不知道这是否适用于可变高度。但是我猜

列

只能垂直对齐，不能水平对齐。所以我认为答案应该是图像上的

float:left

和

display:inline block

。我已经尝试了一种基于float的解决方案。但我的网格中出现了不希望出现的间隙。如果你有一个没有缺口的解决方案，那就太好了。因为据我所知，这个问题没有解决方案。可能重复：