Как обернуть текст вокруг плавающего, фиксированного изображения?

У меня есть изображение, которое плавает в нижнем правом углу (чтобы положить в кнопку, позиция должна быть исправлена). Однако часть текста на моей странице исчезает позади изображения. Можно ли обернуть этот текст вокруг моего изображения?Как обернуть текст вокруг плавающего, фиксированного изображения?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png' 
style='float:right; 
position: fixed; 
right:50px; 
bottom:50px; 
width:20%'> 
Text is placed here 
</body> 
</html>

Вы можете увидеть проблему в действии на этом example page.

источник

2013-10-04 Algorithm_NL

Нет, я не вижу проблемы на вашем примере страницы. -Это ушло. –

Вы должны принять ответ, если он был полезен – fcalderan

Нет, не в CSS.

То, что изображение плавает, здесь не помогает, поскольку оно также исправлено. Поэтому он больше не является частью потока, и текст не отвечает на него.

Это не может быть исправлено только с помощью CSS. Вы можете исправить это с помощью Javascript, перемещая изображение по мере прокрутки, но будет трудно получить правильное решение, и это серьезно замедлит прокрутку страницы, так как текст должен быть повторно выровнен после каждого движения.

Думаю, вам лучше искать другое решение.

источник

2013-10-04 13:40:13 GolezTrol

Я искал разные решения, но не смог найти подходящего. Есть ли у вас предложения? –

Я думаю, вы могли бы сделать что-то с правом плавающего div, который имеет размер вашего изображения. Этот div может быть вставлен в текст в определенной позиции. Какую позицию вам нужно узнать, используя Javascript. Для этого вам нужно скрыть div, получить текстовую позицию на основе видимой области вашего содержимого, а затем снова вставить div в эту позицию в тексте. Это должно быть возможно, но, как я уже сказал, будет трудно получить право и, вероятно, замедлит рендеринг. – GolezTrol

, когда вы используете фиксированную или абсолютную позицию (поплавок здесь не имеет значения для вашего стиля, вы можете удалить его), вы удаляете элемент из своего естественного потока. Таким образом, с учетом этой позиции текст не может обнаружить изображение и перестроить его вокруг него.

источник

2013-10-04 13:40:30 fcalderan

-1

Использование Z-индекс недвижимости вы можете сделать это ..

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png' 
    style='float:right; 
    position: fixed; 
    z-index:-100; 
    right:50px; 
    bottom:50px; 
    width:20%'> 
    <p style="z-index:12000"> 
    Text is placed here</p> 
    </body> 
    </html>

источник

2013-10-07 06:00:38 chinmayahd

Нет, это просто заставляет текст идти вверху изображения. Еще не обертывание :( –

Как обернуть текст вокруг плавающего, фиксированного изображения?

ответ

Смежные вопросы