css - 文本旁注 float

Question

这是我要实现的布局，红色 div 是右浮动的旁注。我让 float 部分正常工作，但由于 div 是 relative，我确实在文本(红色轮廓)中出现了空白。如何将坐标分配给 div(顶部偏移)并且没有其在流中的原始位置的间隙？还是将 div 放置在流程中的所需位置是解决此问题的唯一方法？

    #article {
        float:left;
        width:100%;
    }

    #sideNote {
        position:relative; // produces gap but I'd like to assign offset
        float:right;
        width:35%;
        background:red;
    }

<div id='article'>
   ....
   <div id='sideNote'>
     ....
   </div>
</div>

主要的是，为了将 top:xxem 分配给红色 div，我需要它具有坐标矩阵，这只能通过分配 position 来实现据我了解，absolute 在这种情况下不起作用，因为它不提供文本绕行并且 relative 在原始流程中留下了空白

Answer 1

我更新了@timspqr 的 fiddle ，这可能就是您要找的。

您可以使用 calc 管理音符的掉落百分比

演示:http://jsfiddle.net/FcsBb/5/