1

Есть такой текст и слева картинка, как можно такое реализовать? ИСкал в интернете и ничего не нашёл, видел только обтекание текстом справа(слева) и снизу, а чтобы сверху, справа и снизу не видел.

введите сюда описание изображения

1 ответ 1

2

За обтекание картинки текстом отвечает такое свойство как float.
Ниже приведён пример обтекания, когда изображение слева и справа.

.left,
.right {
  display: block;
  width: 100%;
  font-size: 12px;
}

.left img,
.right img {
  display: inline-block;
  margin: 10px;
}

.left img {
  float: left;
  margin-left: 0;
}

.right img {
  float: right;
  margin-right: 0;
}
<div class="left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu tortor eu erat imperdiet lacinia. Suspendisse dignissim finibus est, ac scelerisque sapien sollicitudin a. Donec eget venenatis ipsum, sit amet luctus nulla. Fusce consectetur odio
  vitae risus rhoncus tempor. Suspendisse et vehicula massa, non luctus mauris. Mauris porta ornare nibh, sit amet condimentum sapien aliquet sit amet. Integer id tristique magna. Sed sed lectus sed neque ultrices maximus at quis mi.
  <img src="https://via.placeholder.com/140x100?text=Float left"> Pellentesque ornare sollicitudin ultricies. Curabitur nisi mauris, eleifend eu egestas a, dictum in massa. Fusce non velit in eros malesuada ornare eget eget elit. Maecenas eget vulputate
  enim. Integer elementum sit amet tellus sed rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse pulvinar, arcu eu elementum volutpat, purus mi pulvinar magna, sit amet imperdiet urna tellus et massa. Quisque nec volutpat
  nunc. Sed laoreet aliquet nisi non dignissim. Suspendisse leo mauris, luctus sit amet tristique quis, ultricies sed libero. Praesent condimentum lorem non imperdiet ultricies. Proin auctor viverra ex ut convallis. Quisque rutrum vitae felis sit amet
  eleifend. Cras ac viverra nisi. Mauris sed bibendum eros.
</div>
<div class="right">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu tortor eu erat imperdiet lacinia. Suspendisse dignissim finibus est, ac scelerisque sapien sollicitudin a. Donec eget venenatis ipsum, sit amet luctus nulla. Fusce consectetur odio
  vitae risus rhoncus tempor. Suspendisse et vehicula massa, non luctus mauris. Mauris porta ornare nibh, sit amet condimentum sapien aliquet sit amet. Integer id tristique magna. Sed sed lectus sed neque ultrices maximus at quis mi.
  <img src="https://via.placeholder.com/140x100?text=Float right"> Pellentesque ornare sollicitudin ultricies. Curabitur nisi mauris, eleifend eu egestas a, dictum in massa. Fusce non velit in eros malesuada ornare eget eget elit. Maecenas eget vulputate
  enim. Integer elementum sit amet tellus sed rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse pulvinar, arcu eu elementum volutpat, purus mi pulvinar magna, sit amet imperdiet urna tellus et massa. Quisque nec volutpat
  nunc. Sed laoreet aliquet nisi non dignissim. Suspendisse leo mauris, luctus sit amet tristique quis, ultricies sed libero. Praesent condimentum lorem non imperdiet ultricies. Proin auctor viverra ex ut convallis. Quisque rutrum vitae felis sit amet
  eleifend. Cras ac viverra nisi. Mauris sed bibendum eros.
</div>

Подробнее: float | htmlbook.ru

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.