"Плавающие" аннотации с 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
), поэтому вам может потребоваться обходное решение вокруг него, Страница витрины обновлена с помощью примера.