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

【问题标题】：-moz-column-fill: auto breaks CSS columns in Firefox-moz-column-fill：在 Firefox 中自动中断 CSS 列
【发布时间】：2014-08-04 10:08:08
【问题描述】：

我正在尝试将我的设计分为三列。在 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>

【问题讨论】：

标签： css firefox responsive-design

【解决方案1】：

要么删除整个-moz-column-fill: auto 规则，要么将其更改为-moz-column-fill: balance (The default initial value)

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>

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

【讨论】：