CSS列不适用于Firefox

Question

我正在创建一个具有Pinterest样式的网页,但是column属性在Firefox中不起作用.

这是我关注的示例,您可以在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-fillis 的初始值balance(在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>