Предположим, что на веб-странице я показываю миниатюры (ширина ~ 200 пикселей по ширине). На среднем экране (например, 15 ") я могу отображать 5 миниатюр в строке.
Теперь, если я изменил размер окна браузера, чтобы 5 эскизов не соответствовали ширине страницы? Я хотел бы, чтобы количество эскизов было автоматически изменено для соответствия странице.
Например: предположим, 5 эскизов с пробелами между ними берут ~ 2000 пикселей. Теперь я изменяю размер окна. Когда ширина страницы будет <2000 px, но> 1600 px. Я хотел бы отобразить 4 миниатюры подряд и так далее.
Какую разметку HTML/CSS следует использовать для достижения такого поведения?
Один из способов - использовать отзывчивый макет. Twitter Bootstrap предоставляет то же самое по умолчанию.
Другой способ - использовать теги @media
. См. Http://www.w3schools.com/css/css_mediatypes.asp. Здесь вам нужно будет сделать такую функцию: получить размер экрана с помощью mediacheck
а затем установить пороговые значения с помощью @media
.
Вы можете использовать свойство float для этого:
float: left;
Плавающие элементы будут обертываться, когда они не соответствуют ширине родителя.
Пример (попробуйте изменить размер страницы)
div
- этоfloat
.div
).