-moz-column-fill：在Firefox中自动中断CSS列

Question

我试图将我的设计分成三列。在Chrome中它运行得很好，但在Firefox中它只显示一列而不是三列。

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>

Answer 1

删除整个-moz-column-fill: auto规则，或将其更改为-moz-column-fill: balance（The default initial value）

＆＃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;

话虽如此，column-fill仍然只是Candidate Recommendation，所以期望浏览器行为发生变化。