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布局工具来实现您正在寻找的效果。

Answer 2

您可以使用CSS3 Columns（Compatibility table）来执行此操作。例如：

ol {
    list-style: decimal outside;

    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

IE9不支持多列模块（但它将在IE10中）。要避免子元素被拆分，您需要break-inside属性：

ol li {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

不幸的是，Firefox（Bugzilla）不支持此功能。