CSS 列不适用于 Firefox [重复]

【问题标题】：CSS columns don't work with Firefox [duplicate]CSS 列不适用于 Firefox [重复]
【发布时间】：2015-07-16 12:30:06
【问题描述】：

我正在制作一个 Pinterest 样式的网页，但是 columns 属性在 Firefox 中不起作用。

This is the example that I am following，你可以在火狐上试试。

这是相关的 CSS：

#columns {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

有什么建议吗？

【问题讨论】：

标签： html css firefox

【解决方案1】：

我还不知道为什么，但是 Firefox 不喜欢 -moz-column-fill: auto，删除它并且示例运行良好。 column-fill 的初始值为balance（此处为read more on column-fill）

body > div {
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  /*-moz-column-fill: auto;*/
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -webkit-column-fill: auto;
  column-count: 3;
  column-gap: 15px;
  column-fill: auto;
}
body > div > div {
  background: #F00;
  height: 400px;
}
body > div > div:nth-child(2n) {
  background: #FF0;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：