html - 垂直自动填充固定宽度容器的列布局？

Question

我在容器元素中有高度不同但宽度固定的元素。当我将元素设置为 inline-block 时，列会自动填满，但是是水平的，就像这样。请注意数字，表示一个元素。

1## 2## 3##
### ### ###
###     ###
        ###
4## 5## 6##
### ### ###
###
7## 8## 9##
### ### ###
        ###

我想要的是让它们也像这样垂直填充。

1## 2## 3##
### ### ###
### 5## ###
4## ### ###
### 8## 6##
### ### ###
7##     9##
###     ###
        ###

假设容器元素的宽度增加了。

1## 2## 3## 4##
### ### ### ###
### 6## ### ###
5## ### ### 8##
###     7## ###
9##     ###
###
###

有没有办法只用 HTML 和 CSS 来做到这一点？

Answer 1

CSS 布局不支持这一点。你必须使用像 Masonry 这样的 Javascript 布局工具。达到您想要的效果。