Я просто зациклился на позиционировании изображения и переносе текста над ним (!) Ситуация проста: у меня есть элемент «p» с некоторым текстом и «img» внутри этого «p», все, что мне нужно, это: переместить мое изображение вниз внутри этого абзаца и сделать так, чтобы текст обтекал это изображение.

<p><img src="/some/source/">Some text</p>

Вот кодовое представление моей проблемы

Спасибо за любую помощь!

css
0
Denis Olehov 16 Июл 2015 в 12:24
Пожалуйста, посмотрите на мой ответ
 – 
Tushar
16 Июл 2015 в 13:10

2 ответа

По сути, четыре числа после полей представляют собой ВЕРХНИЙ ПРАВЫЙ НИЖНИЙ ЛЕВЫЙ. Итак, если вы хотите добавить пробелы к выровненному по правому краю изображению, вы должны сделать это:

<img data-original="IMAGE URL" align="right" style="margin: 0px 0px 0px 10px;" /><p>Your text goes here.</p>

Также ознакомьтесь с этим руководством.

Выровнять значения атрибута

<img align="left|right|middle|top|bottom">

0
Lalit Kumar 16 Июл 2015 в 12:59
Это не работает, потому что margin-top занимает пространство над изображением и блокирует ввод текста в это пространство.
 – 
Denis Olehov
16 Июл 2015 в 12:44
Все еще не работает, для достижения моей цели мне нужно вставить изображение в текст, я имею в виду не с самого начала, но проблема в том, что я не могу манипулировать DOM, поэтому я буду придерживаться JS тогда
 – 
Denis Olehov
16 Июл 2015 в 14:17

Вы можете использовать свойство shape-outside, чтобы создать фигуру вокруг изображения и обернуть текст следующим образом:

shape-outside:polygon(20px 280px, 260px 29px,9px 215px,30px 80px)

КОДЕПЕН

0
Tushar 16 Июл 2015 в 13:08