使用HTML/CSS/JavaScript /其他方式"浮动"注释

Question

我有一个带有注释的文本文档,我想在网页上显示它们附带的文本附近.

也就是说,我想转换这样的东西:

   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 /无论)意义上的东西; 我只是想象在文本中段旁边有这些"注释"需要一些浮动的东西.我愿意接受更好的问题标题的建议:)]

更新:此外,如果"注释"长于一个数字,例如小段落本身或图像,您的方法是否有效？

Answer 1

绝对定位的喜悦

    .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视觉模型,我的展示页面,回答相关问题.

回复:更新.这非常适合大块.请注意,HTML不喜欢何时div,标题或类似的"大"标记放在里面p(有些浏览器会p在这种情况下破坏),所以你可能需要围绕它做一些解决方法.展示页面已更新为示例.