Обтекание элемента в середине абзаца

Предположим, что вы хотите, чтобы изображение визуально обтекалось текстом слева. Но в середине абзаца, а не сверху.

Для этого нужно вставить изображение в середину абзаца:

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  <img src="tree.jpg" alt="An oak tree." />
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

Но что делать с атрибутом alt? В середине предложения не может быть случайного  текста. Это семантически неверно и буквально сбивает с толку людей, использующих вспомогательные технологии. Поэтому необходимо  разместить изображение перед абзацем.

<img src="tree.jpg" alt="An oak tree." />

<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing 
  elit. Similique quibusdam aliquam provident suscipit 
  corporis minima? Voluptatem temporibus nulla
</p>

Но тогда изображение располагается сверху абзаца. Использование свойства margin просто увеличит высоту отступа, а функция translate () отобразит изображение сверху текста.

Хитрость заключается в использовании shape-outside и polygon() для изменения формы обтекания. Для этого можно использовать сервис Clippy.

Вы применяете это значение  к shape-outside. Но для изображения нужен цвет фона. В приведенном ниже примере я немного поэкспериментировал.

0

Данная публикация представляет собой перевод статьи «Float Element in the Middle of a Paragraph» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню