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

Аватар пользователя Алексей Алешин
Алексей Алешин
14 марта 2023

Для решения вашего вопроса подойдет свойство float для картинки и margin для текста.

Свойство float в CSS используется для выравнивания блочных элементов по горизонтали, путем размещения по левому или правому краю родительского элемента. При этом окружающие элементы могут обтекать его с любой стороны.

Например:

HTML

<div class="container">
  <img src="image.jpg" alt="Your Image">
  <p>Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста Много текста</p>
</div>

CSS

img {
  float: left;
  margin-right: 20px; /* отступ между картинкой и текстом */
}

p {
  margin-top: 0; /* убрать отступ сверху */
}

Не забудьте подключить свой CSS файл внутри HTML кода.

0 0
Познакомьтесь с основами HTML и CSS бесплатно

Похожие вопросы