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

Question

[Insom84]

Всем примет!
Сверстал два блока в одну линию которые содержат внутри себя две картинки, также в одну линию:

И блокам и картинкам задал display="inline-block;"
Картинки и блоки сделал адаптивными задав max-width:100%; и height:auto;
Но при уменьшении экрана блоки не уменьшаются в размере вместе с содержимым, а второй переносится на другую строку.
Как это можно исправить?

Comments

[Ankhena]

Флексами https://jsfiddle.net/ntedaL4u/
Гридами с гапом (если нужен) https://jsfiddle.net/cr4ej8dq/

[Insom84]

Ankhena, Отличный вариант. Большое спасибо!

Answer 1

[Николай Миронов]

Оберни в общий div и div каждый блок и задай display: flex, после чего flex-wrap: nowrap; тем самым переноса картинки не будет

Answer 2

[Уктам Хамидов]

Флексбокс в помщь. Оберни эти 2 блока в еще один див с display:flex, добавь flex-basis 50% и flex-wrap: nowrap. По мере сжатия ширины блоки тоже будут сжиматься и сохранять пропорцию в 50% ширины благодаря flex basis, а свойство flex-wrap накладывает запрет на перенос блоков

Comments

[Insom84]

с блоками получилось, перестали переноситься, но вот содержимое-картинки, почему то не адаптируются, а остаются в своем размере?

[Уктам Хамидов]

Картинкам задай width: 100% или 50%(зависит от структуры html) и object-fit:contain.

А вообще как бы я сделал:

div.flex-box>div.block*2>div.img__wrapper>img

.flex{display:flex; flex-wrap:nowrap}
.block{flex-basis:50%; display:flex}
.img__wrapper{width:50%}
img{width:100%; object-fit: contain}

P.S. Прошу прошения за не оформленный подобающим образом код, пишу с телефона

[Insom84]

Уктам Хамидов, Уктам, спасибо! попробую сейчас этот вариант, если разберусь с ним)

[Уктам Хамидов]

Insom84, напиши если что то не получится

[Insom84]

Уктам Хамидов, Уктам, твой вариант на картинки у меня не сработал( Т.е. блоки не переносятся, а вот с картинками проблема.
Вот мой код (там правда наворочено стили и в html и отдельно)
https://codepen.io/gplitt/pen/oNzrVjw

[Уктам Хамидов]

Insom84, завтра утром посмотрю, сейчас уже не за компом, сорри))

[Insom84]

пытаюсь сделать так, чтобы уменьшая до мобильной ширины блоки не переносились, а содержимое уменьшалось внутри них

[Insom84]

Уктам Хамидов, ок, спасибо!