如何格式化 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 分别向它们添加内容。但我不太清楚如何确保评论在该方法的文本段落中的特定位置得到正确锚定。它最终会被混合在一起——它不会重叠，但这在功能上是不可接受的。

所以我开始环顾四周，而不是运行太幸运了。似乎大多数方法都涉及将其更改为 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) 的百分比和 relative/absolute 位置组合是主要成分...

评论后添加：

这是第二个版本，它使用 float: right 和 clear: right 作为两个注释，否则它们会重叠。在这种情况下，使用负数 margin-right 设置会将评论框向右移到内容区域之外，不占用其中的任何 space。

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

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

How to format divs such that it works similarly as Word's commenting format

javascript

css

css-position