我制作了一个简单的容器，卡片按列显示:
.card-container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.card {
display: inline-block;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
这在除Firefox(包括开发版)之外的所有其他浏览器(甚至IE:O)中都可以完美地工作。我已经在Chrome、Safari、Firefox、IE和Edge上进行了测试。
示例:http://brianemilius.com
想买吗?
删除'-moz-column-fill: auto'使网格正常工作。希望能有所帮助=)