CSS专栏不适用于Firefox

Question

我正在创建一个具有Pinterest样式的网页，但是这些列属性在Firefox中不起作用。

This is the example that I am following，您可以在Firefox中试用。

这是相关的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;
}

有什么建议吗？

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;