Плавающее изображение с помощью CSS: текст течет только о первоначальной позиции?

Question

Вот общий план того, что я пытаюсь сделать:

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT /============\
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |            |
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |   IMAGE    |
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |            |
                                             |            |
                                             \============/

По сути, я хочу, чтобы изображение имело float: right;. НО, я не знаю точно, где в тексте должно быть изображение, чтобы оно получилось, как указано выше.

Мне нужно что-то вроде float: right; margin-top: -100px;, чтобы переместить изображение вверх, но текст плавает вокруг исходного положения элемента, а не нового. Подобные вещи случаются, если я использую position: relative; top: -100px;.

Кто-нибудь знает способ достижения этого эффекта только в CSS?

Answer 1

Сегодня в CSS нет способа сделать это чисто.Лучшее, на что вы можете надеяться, это какой-то очень минимальный Javascript.

http://jsfiddle.net/chad/T7SAg/5/

Это было основано на скрипке Джозефа, с использованием техники, упомянутой в SO Answer, с которой связался Cheran.В основном это два поплавка, поплавок с «вертикальным толкателем» и поплавок для изображения, которое вы хотите видеть внизу.Вы используете javascript, чтобы установить высоту всплывающего окна толкателя, а с установкой плавания изображения очистить: вправо, он будет надежно опускаться на дно.