javascript - 类似于 CSS "float:right"，但无法选择

Question

我正在尝试做“ float ”所做的事情，但不能选择复制。这是如何使用它的示例:

<p>
Lorem ipsum dolor sit amet, In a mollis est. Cras vel tortor in purus mattis 
venenatis.
<span style="width: 5em; border: 1px solid black; float: right"> What does "venenatis" means? this is a margin notes! </span>
Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere. Vivamus aliquam erat eget leo molestie egestas. Cras diam sapien. Proin in urna nec est vulputate commodo non vitae nunc. Praesent feugiat suscipit dolor et aliquet. Etiam semper lacus id nisi vehicula posuere.
</p>

这会在相关文本的右侧创建一个类似“便利贴”的框。如果我选择要复制的文本，注释也会被复制，文本流会中断。

有什么办法可以解决这个问题吗？

Answer 1

更简单的解决方案

我能想到的最好方法是提供文本的替代 View ，一个不显示便利贴框的打印友好版本。只要便利贴的内容在文本流中，您就会遇到这个问题。

潜在的(更困难的)替代方案

作为一个更困难的替代方案，您可以选择 javascript 路线。这将涉及在主文本中插入一个空的 DIV 并为其设置宽度和高度，然后将便利贴放置在具有绝对定位的相同位置上。

<div id="container" style="position:relative;">
  <div class="text">Duis non lorem vel diam adipiscing dignissim. 
    Nulla vel varius erat. Nulla facilisi. Vivamus pulvinar pretium dignissim. 
    Aliquam sed tortor posuere nunc bibendum mattis. Integer bibendum, elit ut 
    vestibulum tristique, dolor justo scelerisque nibh, ac blandit metus arcu 
    non nibh.In ac eros sed nisl porta bibendum quis in mauris. Quisque 

    <div style="float:right; margin:10px; width:100px; height:100px;"></div>

    pellentesque ligula eu sapien commodo at mollis purus feugiat. Vivamus 
    volutpat dictum magna eu venenatis. Suspendisse dignissim enim aliquet leo 
    imperdiet vitae accumsan mauris blandit. Donec tempus velit aliquet magna 
    imperdiet euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Vestibulum mollis tortor pellentesque velit pharetra non lobortis est 
    aliquam.
</div>
<div class="post-it">
  I am the post-it. I should be placed absolutely so that 
  I overlap the div that is presently sitting within the body of text. This 
  will give the impression that I too exist within there, but I won't be 
  selectable.
</div>
</div>

动态确定空 div 的宽度/高度，使其与便利贴的宽度/高度相匹配，这可以使用 javascript 轻松完成。下面是一个使用 jQuery 的示例:

var realWidth = $("#container > .post-it").width();
var realHeight = $("#container > .post-it").height();

$("div.text div:eq(0)").css({"width":realWidth,"height":realHeight});

然后您需要获取空 div 的 x 和 y 偏移量，并将其应用为便利贴 div 的左值和上值，使其位于指定区域中文本的正上方.