Недавно столкнулся с проблемой реализации плавающих блоков в одном интернет магазине. Суть в том, что товары выводятся в виде блоков. По задумке количество блоков по горизонтали должно меняться в зависимости от разрешения экрана. Использовать float в тупую не удалось из-за не фиксированой высоты блоков.
Немного погуглив я ничего не нашел. Зато вспомнил, что видел подобное на Яндексе и в магазине студии Лебедева.
Сообственно я выкладываю сюда для ознакомления то, что вы и сами можете найти в указанных источниках. Все, что я сделал это почистил от лишнего кода. Если-бы я нашел подобный пост раньше это сэкономило-бы мне время.
Каждый из этих способов обладает своими достоинствами и недостатками. Посмотрим:
Пример от Яндекса и источник
+ Нет ограничения по высоте блока
+ Заполняет все пустое пространство
— Использует довольно большой javascript
— Используются таблицы
Пример от студии Лебедева и источник (Спасибо за оставленные комментарии)
+ Без javascript
+ никаких таблиц
— Не заполняет пустое пространство когда его не достаточно для нового блока
— Жесткое ограничение по высоте блока
Если вы знаете другие интересные примеры — пишите. Пополню коллекцию.
Немного погуглив я ничего не нашел. Зато вспомнил, что видел подобное на Яндексе и в магазине студии Лебедева.
Сообственно я выкладываю сюда для ознакомления то, что вы и сами можете найти в указанных источниках. Все, что я сделал это почистил от лишнего кода. Если-бы я нашел подобный пост раньше это сэкономило-бы мне время.
Каждый из этих способов обладает своими достоинствами и недостатками. Посмотрим:
Пример от Яндекса и источник
+ Нет ограничения по высоте блока
+ Заполняет все пустое пространство
— Использует довольно большой javascript
— Используются таблицы
Пример от студии Лебедева и источник (Спасибо за оставленные комментарии)
+ Без javascript
+ никаких таблиц
— Не заполняет пустое пространство когда его не достаточно для нового блока
— Жесткое ограничение по высоте блока
Если вы знаете другие интересные примеры — пишите. Пополню коллекцию.