Question

我正在尝试为网站制作旁注，但如果我使用absolute定位，当两个引文彼此太接近时，它们将重叠。使用relative定位，将侧边注释推入页面的侧边栏区域后面留下空白区域，迫使段落的文本环绕白色空间;有没有办法使用JavaScript折叠该空格？

或者是否有不同/更好的方法来使用JavaScript获得相同的效果？

至关重要的是，旁注与引文--并列，并未单独使用JavaScript显示，也不会像脚注那样单独列出。而且只是避免过于接近的引用不是一种选择。

Fiddle

HTML：

<div id="main_column" class="grid_3 alpha omega">
    <p class="bodycopy">Donec ultricies massa vel dui lobortis, et ornare augue volutpat. Proin aliquam nec orci ut consequat. Donec sapien libero, tincidunt quis arcu vitae, hendrerit commodo neque.<sup>1</sup><small><strong>1</strong> Side note test. In imperdiet nibh turpis,
    eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium in venenatis eget, faucibus ac 
    eros.</small> In imperdiet nibh turpis, eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium in venenatis eget, faucibus ac eros.<sup>2</sup><small><strong>2</strong> Side note 
    test. In imperdiet nibh turpis, eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium 
    in venenatis eget, faucibus ac eros.</small> Phasellus nec efficitur magna.…</p>
</div>

相关的CSS：

small {
    position: absolute;
    display: block;
    font-size: 14px;
    font-family: BrandonGrotesque, Helvetica, Verdana, Arial, sans-serif;
    top: auto;
    margin-top: -28px;
    margin-left: 640px;
    width: 260px;
    height: auto;
}

Answer 1

您的要求很难。例如 - 如果您在同一行上发生两次引用，您会怎么做？

可能有一个javascript解决方案来计算事物的位置并将它们移动到适当的位置。我知道这是可能的，但我不是明确写作或解释它的合适人选。

我认为您可以减少可能需要与较小的文本和行高保持一致的情况：

small {
    font-size: 12px;
    line-height:110%
}

这会使它们不那么频繁地重叠，但要真正做到这一点，你需要弄清楚当两个引用在同一条线上时你会做什么。除了某种css悬停/隐藏效果，我认为唯一的方法是使用一些非平凡的javascript来确定放置的位置。

如何从重新定位的浮动div中折叠空白区域？

Fiddle

1 个答案: