Insom84
@Insom84

Два адаптивных inline блока без переноса на другую строку?

Всем примет!
Сверстал два блока в одну линию которые содержат внутри себя две картинки, также в одну линию:
600f1e9cbd8d1326242541.jpeg
И блокам и картинкам задал display="inline-block;"
Картинки и блоки сделал адаптивными задав max-width:100%; и height:auto;
Но при уменьшении экрана блоки не уменьшаются в размере вместе с содержимым, а второй переносится на другую строку.
Как это можно исправить?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 2
@LLlYCTPBl
Знаю фронтенд, учу JS, помогаю новичкам:)
Оберни в общий div и div каждый блок и задай display: flex, после чего flex-wrap: nowrap; тем самым переноса картинки не будет
Ответ написан
@thereal_kh
Более менее опытный фронт-энд разработчик.
Флексбокс в помщь. Оберни эти 2 блока в еще один див с display:flex, добавь flex-basis 50% и flex-wrap: nowrap. По мере сжатия ширины блоки тоже будут сжиматься и сохранять пропорцию в 50% ширины благодаря flex basis, а свойство flex-wrap накладывает запрет на перенос блоков
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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