如何格式化div，使其与Word的注释格式类似

Question

我正试图使用CSS来重新创建类似于Word中注释框格式的东西，注释框将位于您为注释插入锚的任何位置，但如果注释数量超过空间允许的范围，它会相应地打乱注释框，同时尽可能使其锚定在锚附近。评论框文本也不应在任何时候影响主文档的格式。

我尝试在一大段文本的一侧设置position: absolute;评论框，比如说，它是<p>或其他任何东西，我认为这并不重要。。。你基本上有这样的东西：

<p> 
lalalal lalala lal lalalalal 
just assume that the lines collapse as needed
but in reality, this will be one big paragraph
yes, we'll keep going for the sake of this exercise
yay
okay, quasi anchor point here **** 
<div class='commentBox'>
I am the first comment bboooxxxx
let's get a few lines baby
I am lovin it!
Just do it
</div>
keep going
yes we are still going
<div class='commentBox'>
I am gonna cover you up, first box
</div>
okay, let's call it done
</p>

commentBox的css的简化形式是：

.commentBox {
position: absolute;
left: 400 px; /*Whatever more than the width of the settings for the <p> tag*/
border: solid lightpink;
}

虽然这对于一个注释来说很好，但多个注释将不可避免地重叠。所以，我们有两种方法可以处理它。首先是table，一切都好吗？我们可以在添加注释的地方强制行，这样只会为添加的每个注释创建更多的行显示。但这是一个非常不优雅的解决方案。它打破了文本，使跟踪一切变得困难。

我也考虑过使用两列，然后用position: relative分别向它们添加内容。但我不太清楚如何确保评论正确地固定在该方法文本段落中的某个位置。它最终会被捣碎在一起——它不会重叠，但这在功能上是不可接受的。

所以我开始四处寻找So，并没有遇到太多的运气。似乎大多数方法都涉及将其更改为position: relative，我确实对此没有意见，但我不太清楚如果我真的将它更改为相对，我如何确保主段落的格式不会因此受到影响。

以前有人做过类似的事吗？你是怎么做到的？或者如果你没有，你会怎么做？

Answer 1

您可以使用这样的东西：

.content {
position: relative;
width: 75%;
border-right: 1px solid #ccc;
padding-right: 10px;
}
.commentbox {
display: block;
position: absolute;
right: -25%;
width: 23%;
border: 1px solid #fa0;
padding: 3px;
}
;

<p class="content">
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet <span class="commentbox">This is a comment which can even be longer</span> orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Maecenas nec odio et ante tincidunt tempus.
<br>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

如图所示：widths和位置参数(right((以百分比表示(以及相对/绝对位置组合是。。。

评论后添加：

这里是第二个版本，它将float: right和clear: right用于两个注释，否则这两个注释将重叠。在这种情况下，使用负margin-right设置将注释框向右移动到内容区域之外，而不占用其中的任何空间。

.content {
width: 75%;
border-right: 1px solid #ccc;
padding-right: 10px;
}
.commentbox {
display: block;
float: right;
margin-right: -28%;
width: 23%;
border: 1px solid #fa0;
padding: 3px;
clear: right;
}

<p class="content">
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet <span class="commentbox">This is a comment which can even be longer</span> orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. <span class="commentbox">This is another comment box</span>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
id, lorem. Maecenas nec odio et ante tincidunt tempus.
<br>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>