Чтобы сделать картинки обтекаемыми текстом в CSS, можно использовать свойство float. Это свойство выравнивает элемент по левому или правому краю контейнера и позволяет тексту обтекать этот элемент.
HTML:
<div class="container">
<img src="image.jpg" alt="Картинка">
<p>Текст, который должен обтекать картинку...</p>
</div>
CSS:
img {
float: left; /* или right, чтобы выровнять элемент по правому краю */
margin-right: 20px; /* опционально: задает отступ справа от картинки */
}
В этом примере мы создали контейнер div с классом container и поместили в него картинку и абзац с текстом, который должен обтекать картинку.
Затем мы применили стиль к элементу img, задав значение float: left. Это выравняет картинку по левому краю контейнера и позволит тексту обтекать ее слева.
Желательно задать отступ справа от картинки, чтобы текст не прилипал к ней тесно. Это можно сделать с помощью свойства margin-right, как в примере выше.
Также обратите внимание, что для корректной работы обтекания текстом необходимо, чтобы картинка не была слишком большой. Если картинка слишком широкая, ее можно обрезать с помощью свойства clip-path или задать фиксированный размер, чтобы вместилась на страницу.
