«Плавающие» аннотации с HTML / CSS / JavaScript / что угодно - PullRequest
Новая
       11

«Плавающие» аннотации с HTML / CSS / JavaScript / что угодно

10 голосов
/ 09 июня 2009

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

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

   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 Ответ

12 голосов
/ 09 июня 2009

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

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

Как это работает: При абсолютном позиционировании вы обычно указываете одну из каждой пары right / left и top / bottom атрибутов. Однако вам не нужно: пропущенный атрибут 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: обновление. Это отлично работает для больших блоков. Обратите внимание, что HTML не нравится, когда div, заголовок или аналогичный тег 'big' помещается внутри p (и некоторые браузеры в этом случае ломают p), поэтому вам, возможно, придется обойти это. , Страница витрины обновлена ​​с примером.

...