-moz-column-fill:在 Firefox 中自动断开 CSS 列 [英] -moz-column-fill: auto breaks CSS columns in Firefox

问题描述

我正在尝试将我的设计分成三列.在 Chrome 中它运行良好，但在 Firefox 中它只显示一列而不是三列.

body >div {-moz 列数:3；-moz-column-gap: 10px;-moz 列填充:自动；-webkit 列数:3；-webkit-column-gap: 10px;-webkit 列填充:自动；列数:3；列距:15px；列填充:自动；}身体 >div >div {背景:#F00；高度:400px；}身体 >div >div:第n个孩子(2n){背景:#FF0；}

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

解决方案

要么删除整个 -moz-column-fill: auto 规则，要么将其更改为 -moz-column-fill: balance(默认初始值)

body >div {-moz 列数:3；-moz-column-gap: 10px;/*-moz-column-fill:自动；*/-webkit 列数:3；-webkit-column-gap: 10px;-webkit 列填充:自动；列数:3；列距:15px；列填充:自动；}身体 >div >div {背景:#F00；高度:400px；}身体 >div >div:第n个孩子(2n){背景:#FF0；}

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

话虽如此，column-fill 仍然只是一个 候选推荐，因此预计浏览器行为会发生变化.

I am trying to divide my design into three columns. In Chrome it is working perfectly, but in Firefox it is showing only one column instead of three.

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>

解决方案

Either remove the whole -moz-column-fill: auto rule, or change it to -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>

That being said, column-fill is still only a Candidate Recommendation, so expect browser behaviour to change.

这篇关于-moz-column-fill:在 Firefox 中自动断开 CSS 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！