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

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

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

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

<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. Но для картинки нужен цвет фона. В приведенном ниже примере я поэкспериментировал.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *