Как разместить три «резиновых» блока?

Здравствуйте. Помогите пожалуйста советом по реализации идеи. В блоке со стилем max-width: 850px - родитель (нельзя его менять, если только вложить другой, со своими размерами), нужно разместить горизонтально 3 блока. Если ширина родителя позволяет, то отображаются все три блока рядом, но если ширина уменьшается (регулируют окно браузера), то пока хватает места рядом - отображаются 2 блока, а третий ниже, автоматически на всю ширину родителя должен получится, а когда и двум "тесно" становится, то все три должны быть размещены друг под другом, с автоматической шириной (т.е подстраиваться под ширину родителя). Ну и максимальный размер каждого блока когда они идут все три горизонтально не должен превышать в ширину 265px. Возможно ли такое реализовать на css или тут только уже JS применять?
  • Вопрос задан
  • 142 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Александр, Последнее условие вставляет палки в колеса.
265 *3 = 795 < 850; плюс медиа привязаны к вьюпорту.

В общем вот вариант, он работает, когда .parent ограничивается только вьюпортом.
Сделайте padding для body, медленно изменяйте размер панели, поймете, о чем я.
Можно внести поправки в значения медиазапросов на реальном сайте.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
4mobile
@4mobile
WEB developer
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Обычный CSS с медиа-запросами точно поможет
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы