"Плавающие" аннотации с HTML/CSS/JavaScript/безотносительно

У меня есть текстовый документ с некоторыми аннотациями, и я хотел бы, чтобы они отображались рядом с текстом, который они сопровождают, на веб-странице.

То есть, я хочу преобразовать что-то вроде этого:

   The Houdan hen was never drawn into the
   cult of Sredni Vashtar. Conradin had
   long ago settled that she was an
   Anabaptist. He did not pretend to have        [23]
   the remotest knowledge as to what an
   Anabaptist was, but he privately hoped
   that it was dashing and not very
   respectable.

соответственно, так что в браузере [23] отображается где-то на той же строке, что и слова "притворяться имеющими" (предпочтительно в левом или правом поле "на странице" ), независимо от размера шрифта или везде, где может произойти разрыв строки. Возможно ли это с любым сочетанием CSS/JavaScript/предварительной обработки?

См. (левое поле) на этой странице для примера того, что я хочу сделать: номера страниц сопровождают текст. За исключением того, что текст - это не просто стих, который находится в <pre>, поэтому я не могу точно скопировать то, что они делают. (Я думаю, что можно переместить все аннотации в верхнюю/нижнюю части абзацев и показать их там, но я бы этого не хотел.)

Я понимаю, что этот вопрос может быть неопределенным, но я открыт для предложений.

[ Примечание: мне не нужно ничего "плавать" в техническом (CSS/безотносительно) смысле; Я просто предположил, что наличие этих "аннотаций" рядом с текстовым абзацем требует чего-то плавающего характера. Я открыт для предложений также для лучшего заголовка вопроса:)]

Обновить. Кроме того, работает ли ваш метод, если "аннотации" длиннее, чем просто число, например. маленькие абзацы сами или изображения?

Ответы

Ответ 1

Радость абсолютного позиционирования

    .on-margin {
        position: absolute;
        right: 10%;      /* right margin from the containing box */
    }

Как это работает: При абсолютном позиционировании вы обычно указываете одну из двух пар атрибутов right/left и top/bottom. Однако вам не нужно: omitting top атрибут оставляет его на auto, то есть в текущей строке.

Уточнение: после тщательного чтения, я считаю, что спецификация CSS 2.1 не упоминает, что можно указать right: 10%; top: auto; и что спецификация не предписывает никакого поведения.

Примечание.. Ранее я указал display:block явно. Фактически, для спецификация, display автоматически изменяется на block для большинства абсолютно позиционированных элементов.

Протестировано: Safari 4.0, Firefox 3.6a1pre, Camino 2.0b3, Opera 10.00b1/Mac

Ссылки: визуальная модель CSS 2.1, моя страница витрины, ответьте на соответствующий вопрос.

Re: update. Это отлично работает для больших блоков. Обратите внимание, что, хотя HTML не нравится, когда div, заголовок или аналогичный "большой" тег помещается внутри p (и в этом случае некоторые браузеры будут разбиваться на p), поэтому вам может потребоваться обходное решение вокруг него, Страница витрины обновлена ​​с помощью примера.