CSS中浮动侧注的问题

Question

我正在尝试浮动侧注，切入文本的主体。你可以看到我到目前为止here和（作为jsfiddle）here。

我遇到了两个我想要同时满足的限制的问题：

• 使用旁注与文本引文对齐：例如，正文中的上标“1”和旁注中的上标“1”应该水平排列。
• 给旁注提供他们需要的填充，以便缩短填充到填充中的任何主要文本行。

目前，我正在满足第二个约束，但这使我无法满足第一个约束。有谁知道如何同时满足这两个？谢谢！

编辑：Here是一个说明基本想法的小图片。在旧文本中，我只想要像老式的旁注那样的行为。

Answer 1

您可以为top规则添加floatnote样式：

floatnote {
    position: relative;
    background:white;
    top:-20px;  // ADD THIS
    padding: 20px 0px 10px 15px;
    display: block;
    width: 150px;
    clear: right;
    float: right;
}

http://jsfiddle.net/jasongennaro/ffYEK/3/

仅在Chrome中测试