Как сделать обтекание картинки текстом?

Question

[Evtera]

У данного макета, как я понимаю, нет общего контейнера, но все блоки выравниваются по левой линии. Как мне сделать обтекание картинки текстом с тем условием, чтобы вертикальное выравнивание блоков не слетело?
float тут помогает, но тогда опять же при сужении экрана нарушается вертикальное выравнивание у самих блоков.

Answer 1

[Османов Осман]

Использовать float.

<img src="<путь-к-картинке>" alt="image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta unde, quisquam voluptates libero praesentium, asperiores ratione ea deserunt at quaerat animi quo! Mollitia iusto nisi obcaecati alias similique, doloribus, eos.</p>

А в css:

img {
float: left;
}

Так делать - правильно. Свойство float создает обтекание. Мы указали значение left, значит картинка будет находиться слева. Можно указать, также, значение right (полный список значений можно найти в документации свойства). То есть, по сути, текст обтекает картинку справа, а вместе с ним, идущий за ним элемент (остальные элементы, идущие за текстом ведут себя нормально). И, чтобы убрать обтекание следующего элемента ему необходимо присвоить свойство clear со значением both. Это уберет обтекание. Надеюсь, помог))