gpt4 book ai didi

css - -moz-列填充 : auto breaks CSS columns in Firefox

转载 作者:行者123 更新时间:2023-11-28 09:18:11 26 4
gpt4 key购买 nike

我试图将我的设计分成三列。在 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>

最佳答案

要么删除整个 -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 ,因此预计浏览器行为会发生变化。

关于css - -moz-列填充 : auto breaks CSS columns in Firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24212251/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com