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

我正试图做“浮动”做什么，但不能选择复制。这是一个如何使用的示例：

<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>

这会在相关文本的右上角生成一个类似“post it notes”的框。如果我选择要复制的文本，则也会复制注释，并断开文本流。
有什么办法解决这个问题吗？

最佳答案

更简单的解决方案
我能想到的最好的方法是提供文本的另一种视图，一个打印机友好的版本，它不显示您的post-I t框。只要文章的内容在文本流中，你就会遇到这个问题。
潜在的（更困难的）选择
作为一个更困难的选择，您可以使用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的宽度/高度，以便它与post的宽度/高度相匹配，使用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偏移量，并将其作为post-it div的左上角值应用，这样它就位于文本的右上角，在指定的区域中。

关于javascript - 类似于CSS“float:right”，但无法选择，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1382467/