Как сделать обтекание картинки текстом в нижнем правом углу

Опубликовано автором

Размещение изображения справа или слева с обтеканием текста? Для этого нужен float-блок – это простая задача.

Но как насчет размещения изображения в нижнем левом или нижнем правом углу?

На первый взгляд это кажется сложной задачей, чтобы справиться с ней наверное понадобиться JS?

На самом деле – нет! Всё это делается с помощью нескольких строк CSS.

Код HTML:

<div class="wrapper">
  <div class="box">
    <div class="float">
      <img src="image.jpg" >
    </div>
    Много текста :) ...
  </div>
</div>

Код CSS:

.wrapper {
  display:flex;
}
.float {
  float:right;
  height:100%;
  display:flex;
  align-items:flex-end;
  shape-outside:inset(calc(100% - 100px) 0 0);
}

Смотрите по теме:
Выравнивание изображения в контейнере при помощи CSS

Просмотры: 322