我举起了一个赏金,但是一个正确的答案从未达到.我已经实现了一个适用于我的JS解决方案,但是我不会将答案标记为正确.如果可以使用CSS / HTML,我仍然希望看到它.但普遍的共识是,目前还不可能.

目标

CodePen here,底部可运行的代码段.

我有一些HTML内容,我想用一个在其上方浮动的小消息进行注释,在最左边,就像< ruby​​>注释(但不完全).可以有许多内容,每个都有自己的注释.内容必须遵循正常的文本流.这是我当前的HTML：

<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird,</div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>still no</div>
  <div class='content'>it's a plane,</div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>

工作实例

下面这句话是一只鸟,这是一架飞机,它是超人！去氪石有4个独立的部分(4个内容),每个部分用不同的颜色表示.每个内容都有自己的注释,以上面的斜体显示.

我通过使内容和注释float：left和赋予注释为负余量来进行工作.这是CodePen中的示例1.

破例1

当注释长于内容时,会出现该问题.在下面,注释仍然没有改变到更长的时间你可能是对的.两条内容行继续遵循正常的内联流程(根据需要),但是由于注释仍然排列到其内容的左边缘,所以它们重叠.

这是CodePen中的示例2.

破例2

一个提出的解决方案是使用一个具有可见性的表：collapse来进行对齐,这有助于防止重叠,但是在注释开始超过内容的左边缘的情况下,它会在注释之后产生额外的空间.

应该如何工作

我想要注释遵循自己的流程,但不会破坏内容的自然内联流.看下面的内容是如何仍然是一个完整的句子,但是啊！被转移到右边,让你可以拥有所有需要的房间很长时间.然而,这个muahaha修正了,因为它有空间直接坐在Go上去得到氪石.

我可以改变CSS和HTML来实现这一点,但只有一个CSS的解决方案是最佳的.谢谢.

.item {
  margin-top: 20px;
}
.content,.annotation {
  float: left;
  white-space: pre;
}
.annotation {
  margin-top: -25px;
  font-style: italic;
}
 
 
h3 {
  clear: both;
  margin: 0;
  padding: 20px 0;
}
 
td:first-child {
  color: red;
}
td:nth-child(2) {
  color: green
}
td:nth-child(3) {
  color: blue;
}
td:nth-child(4) {
  color: orange;
}

<h3>Working Example</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird,</div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>
 
 
<h3>Broken Example 1 (note the overlap)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird,</div>
</div>
<div class='item' style='color: green'>
  <div class='annotation'>you may be right</div>
  <div class='content'>it's a plane,</div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>
 
<h3>Broken Example 2 (note the overlap)</h3>
 <table>
  <tr style='font-style: italic'>
    <td>nope</td><td>you may be right</td><td>yeah!</td><td>muahaha</td>
  </tr>
  <tr style="visibility:collapse;"><td>It's a bird,</td><td>it's a plane,</td><td>it's Superman! </td><td>Go get the kryptonite</td></tr>
</table>
<table style="margin-top:-25px;"><tr><td>It's a bird,</td><td>it's Superman!</td><td>Go get the kryptonite</td></tr></table>
 
<h3>How it should look (cheating with positioning)</h3>
<div class='item' style='color: red'>
  <div class='annotation'>nope</div>
  <div class='content'>It's a bird,</div>
</div>
<div class='item' style='color: blue'>
  <div class='annotation' style='margin-left: 35px'>yeah!</div>
  <div class='content'>it's Superman! </div>
</div>
<div class='item' style='color: orange'>
  <div class='annotation'>muahaha</div>
  <div class='content'>Go get the Kryptonite</div>
</div>