На данный момент я работаю с последними версиями браузеров. Я пытаюсь создать раскладку из трех столбцов, используя свойство column
CSS.
Кажется, что он отлично работает везде, кроме 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>
Я также получаю эти ошибки CSS, зарегистрированные в FF.
Неизвестные свойства "столбцы". Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10876 Неизвестное свойство 'column-count'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10877 Неизвестный объект 'column-gap'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10878 Неизвестное свойство 'column-width'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10879 Неизвестное свойство 'column-fill'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10880 Неизвестное свойство '-moz-column-break-inside'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10887 Неизвестное свойство 'column-break-inside'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10888 Неизвестные свойства 'column'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10912 Неизвестное свойство 'column-count'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10913 Неизвестный объект "column-gap". Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10914 Неизвестное свойство 'column-fill'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10915 Неизвестные свойства 'columns'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10929 Неизвестное свойство 'column-count'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10930 Неизвестная собственность 'column-gap'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10931 Неизвестное свойство 'column-fill'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10932 Неизвестные свойства 'columns'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10948 Неизвестное свойство 'column-count'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10949 Неизвестный объект 'column-gap'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10950 Неизвестное свойство 'column-fill'. Декларация опустилась. 63f26845e7f429a90b8ae649031e4a073ade7260.css: 10951, мутирующий [[Prototype]] объекта, заставит ваш код работать очень медленно; вместо этого создайте объект с правильным исходным значением [[Prototype]], используя Object.create meteor.js: 532 "BookingsController slug" "VBS" router.js: 156 "BookingsController slug" "VBS" router.js: 156 "bookingProfile properties "Массив [Object, Object, Object, Object, Object] profile.js: 5 Ошибка в анализируемом значении для фона. Декларация опустилась. VBS
Что с этим?
Использование: -moz-column-fill: сбалансированный; Вместо: -moz-column-fill: auto;
Благодаря... -moz-column-fill: автоматическое разбиение столбцов CSS в Firefox