Ошибка в столбцах CSS - количество столбцов в 5 отображается только 4 (с изображениями) - PullRequest
Новая
       28

Ошибка в столбцах CSS - количество столбцов в 5 отображается только 4 (с изображениями)

5 голосов
/ 16 февраля 2012

Я пытаюсь реализовать пример Криса Койера использования столбцов 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;
  }
}

Ответы [ 3 ]

1 голос
/ 06 марта 2012

Хорошо, у меня есть ответ, хотя это обходной путь, а не исправление.Я изменил изображения так, что некоторые из них имели высоту 300 пикселей, а другие - 370 пикселей.В основном я изменил высоту изображений и сохранил ширину всех изображений одинаковой, 300 пикселей.Таким образом, ответ заключается в том, чтобы либо не использовать квадратные изображения, либо, если вы хотите использовать все квадратные изображения, используйте количество столбцов: 4 вместо 5.

Если кто-то может дать дополнительное понимание того, почему это происходит, то этобольшой.

1 голос
/ 16 февраля 2012

Когда мой браузер достигает 1219 пикселей в ширину (по крайней мере, как говорит Firesize ), я получаю 5 столбцов.Ниже я тоже получаю 4.Firefox 10.

Некоторые вещи, которые могут происходить:

  • Моя вертикальная полоса прокрутки имеет ширину ровно 19 пикселей
  • Граница слева и справа от окна Firefox9 пикселей каждый, что в сумме составляет 18 пикселей

Похоже, что один из них включен в медиа-запрос.

Редактировать: хотя и немного странно, потому что на первый взгляд сайт медиазапросов W3 , по-видимому, предполагает, что:

Медиа-функция width определяет ширину целевой области отображения устройства вывода.Для непрерывных носителей это ширина области просмотра (как описано в CSS2, раздел 9.1.1 [CSS21]) , включая размер визуализированной полосы прокрутки (если есть)

0 голосов
/ 30 сентября 2014

На тот случай, если кто-то еще обнаружит это в своих результатах поиска, это тот факт, что изображения встроены, поэтому между ними есть некоторое расстояние, см.

Как можно устранить расстояние между встроенными элементами вCSS?

Я использую размер шрифта: 0 в разделе, чтобы исправить это:)

...