Html 如何在CSS中使图像相互对齐？

我正在尝试创建一个包含两列的容器，其中包含一组大小不同的图像（我希望它们保持不同的大小），排列方式如下：

我尝试过像这样使用flexbox：

.container{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.项目{
弹性基准：50%；
}

但是这样做的结果是，每2列与顶部对齐，但我希望图像彼此浮动，如前一个屏幕截图所示

我尝试过使用浮动，但出现了以下奇怪的行为：

.container{
显示：块；
}
.项目{
宽度：50%；
显示：内联块；
浮动：左；
}

---

是否有人知道如何按照第一幅图像所示正确对齐图像？

请参考以下测试代码

#容器{
-moz列数：2；
-webkit列数：2；
列数：2；
高度：145px；
宽度：100px；
}
.街区{
宽度：50px；
背景色：红色；
保证金：0.5px 0；
}

工作正常！非常感谢！因此，对于

列计数

，如果我有8个项目，第一列将包含项目1、2、3、4，第二列将包含项目5、6、7、8。有没有一种方法可以让它像这样以不同的方式传播：第1列有第1、3、5、7项，第2列有第2、4、6、8项。基本上，这样的项目将横向而不是垂直分布？