FireFox 3 列 css3 布局不工作，在 Chrome 和 Safari 中工作

Question

在撰写本文时，我正在使用最新的浏览器版本。我正在尝试使用 CSS column 属性.

创建 3 列布局

除 FF 外，它似乎在任何地方都可以正常工作。

这是我的代码：

.row {
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 5px;
  column-fill: auto;
}
.item {
  background: #F00;
  height: 200px;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
</div>

我也在 FF 中记录了这些 CSS 错误。

Unknown property 'columns'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10876 Unknown property 'column-count'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10877 Unknown property 'column-gap'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10878 Unknown property 'column-width'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10879 Unknown property 'column-fill'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10880 Unknown property '-moz-column-break-inside'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10887 Unknown property 'column-break-inside'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10888 Unknown property 'columns'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10912 Unknown property 'column-count'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10913 Unknown property 'column-gap'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10914 Unknown property 'column-fill'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10915 Unknown property 'columns'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10929 Unknown property 'column-count'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10930 Unknown property 'column-gap'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10931 Unknown property 'column-fill'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10932 Unknown property 'columns'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10948 Unknown property 'column-count'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10949 Unknown property 'column-gap'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10950 Unknown property 'column-fill'. Declaration dropped. 63f26845e7f429a90b8ae649031e4a073ade7260.css:10951 mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create meteor.js:532 "BookingsController slug " "VBS" router.js:156 "BookingsController slug " "VBS" router.js:156 "bookingProfile properties" Array [ Object, Object, Object, Object, Object ] profile.js:5 Error in parsing value for 'background'. Declaration dropped. VBS

这是怎么回事？

Answer 1

使用：-moz-column-fill: balanced; 而不是：-moz-column-fill: auto;

感谢... -moz-column-fill: auto breaks CSS columns in Firefox

FireFox 3 列 css3 布局不工作，在 Chrome 和 Safari 中工作

FireFox 3 column css3 layout doesn't work, works in Chrome and Safari

html

css

firefox

multiple-columns