"Выносной" элемент прямо в контенте

[d0ublezer0]

К примеру в ководстве есть такая штука как "пометки на полях". Ремарки, которые размещены ровно на той же высоте с текстом, к которому они относятся.

Видно, что сделано таблицей, но в ручную такой бедой управлять - вообще не вариант.

 

Как бы сделать такое средствами CSS? К примеру, в потоке контента вставим ссылку с картинкой, или просто текст, не важно, с определенным классом, который будет вырван из потока и разместится рядом с ним на том же уровне по высоте?

 

Пока то, что в  голову пришло - релативный контейнер в нужном месте контента, в котором абсолютно спозиционированный "выносной" элемент.

Минусы - опять же не просто управлять, т.к. нужна доп. разметка (контейнер), и то, что нужно в этом случае точно знать, на сколько выносится элемент и какой у него размер.

 

Вот пример (на сайте) как мне удалось намудрить:

Класс контейнера .imager имеет только одно свойство - position:relative

 

Можно что-то такое придумать, но с одним элементом/классом?

Edited December 12, 2013 by d0ublezer0

[sigma77]

Например, так:

http://fiddle.jshell.net/dxn93/show/

http://jsfiddle.net/dxn93/

 

Если не задать класс .has_pullquote и не определять top, то он примет значение auto и будет определятся в зависимости от положения в разметке. Если top нужно регулировать, то это можно сделать как раз через эту доп. обертку.

[d0ublezer0]

О, да, класс!