Ошибка в столбцах CSS - только 5 столбцов с 4-мя изображениями
Я пытаюсь реализовать Криса Койерапример использования CSS-столбцов для создания бесшовной адаптивной сетки изображений.
Я положил файлы Криса на свой сервер, и все выглядело хорошо. Единственное, что я изменил, были настоящие изображения.
Теперь, как вы видите на моемтестовая страница, есть только 4 столбца изображений вместо указанных 5, используяcolumn-count:5;
, Пятый столбец - это просто пробел без контента.
Это происходит только тогда, когда окно браузера больше 1200 пикселей. Когда окно браузера меньше 1200 пикселей, медиазапросы включаются и уменьшают количество столбцов 4, 3, 2 и, наконец, 1. Другими словами, эта ошибка возникает только тогда, когдаcolumn-count:
5 и выше
Это происходит в FF 10, Chrome 17+ и Safari 5+.
Любая помощь будет оценена!
Вот урезанный HTML:
<section id="photos">
<img src="images/iso_o.jpg" alt="Isometric" />
<img src="images/iso_o.jpg" alt="Isometric" />
<img src="images/iso_o.jpg" alt="Isometric" />
<img src="images/iso_o.jpg" alt="Isometric" />
<img src="images/iso_o.jpg" alt="Isometric" />
<img src="images/iso_o.jpg" alt="Isometric" />
...
</section>
Вот нетронутый CSS:
* { margin: 0; padding: 0; }
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
#photos {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}