Подгонка миниатюр при изменении размера страницы

0

Предположим, что на веб-странице я показываю миниатюры (ширина ~ 200 пикселей по ширине). На среднем экране (например, 15 ") я могу отображать 5 миниатюр в строке.

Теперь, если я изменил размер окна браузера, чтобы 5 эскизов не соответствовали ширине страницы? Я хотел бы, чтобы количество эскизов было автоматически изменено для соответствия странице.

Например: предположим, 5 эскизов с пробелами между ними берут ~ 2000 пикселей. Теперь я изменяю размер окна. Когда ширина страницы будет <2000 px, но> 1600 px. Я хотел бы отобразить 4 миниатюры подряд и так далее.

Какую разметку HTML/CSS следует использовать для достижения такого поведения?

Теги:

3 ответа

1
Лучший ответ

Однажды я сделал скрипку, чтобы объяснить кому-то медиа-запросы. Вы можете использовать подобный дизайн, хотя обычно гораздо проще просто float:left или на display:inline-block свои элементы и позволяйте браузеру заботиться обо всем остальном.

DEMO

1

Один из способов - использовать отзывчивый макет. Twitter Bootstrap предоставляет то же самое по умолчанию.

Другой способ - использовать теги @media. См. Http://www.w3schools.com/css/css_mediatypes.asp. Здесь вам нужно будет сделать такую функцию: получить размер экрана с помощью mediacheck а затем установить пороговые значения с помощью @media.

1

Вы можете использовать свойство float для этого:

float: left;

Плавающие элементы будут обертываться, когда они не соответствуют ширине родителя.

Пример (попробуйте изменить размер страницы)

  • 0
    Большой ! Итак, это делается автоматически, если div - это float .
  • 0
    Да. Он должен автоматически переноситься, если вы перемещаете каждый элемент эскиза (не обязательно должен быть div ).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню