-moz-column-fill:在Firefox中自动断开CSS列 [英] -moz-column-fill: auto breaks CSS columns in Firefox
本文介绍了-moz-column-fill:在Firefox中自动断开CSS列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想把我的设计分成三列。在Chrome它的工作完美,但在Firefox它只显示一列,而不是三个。
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>
推荐答案
删除整个 -moz-column-fill:auto
规则,或将其更改为 -moz -column-fill:balance
(默认初始值)
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>
话虽如此, column-fill
仍然只是一个候选推荐,因此希望浏览器的行为会改变。
That being said, column-fill
is still only a Candidate Recommendation, so expect browser behaviour to change.
这篇关于-moz-column-fill:在Firefox中自动断开CSS列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文