更新
我举起了一个赏金,但是一个正确的答案从未达到.我已经实现了一个适用于我的JS解决方案,但是我不会将答案标记为正确.如果可以使用CSS / HTML,我仍然希望看到它.但普遍的共识是,目前还不可能.
目标
我有一些HTML内容,我想用一个在其上方浮动的小消息进行注释,在最左边,就像< ruby>注释(但不完全).可以有许多内容,每个都有自己的注释.内容必须遵循正常的文本流.这是我当前的HTML:
工作实例
下面这句话是一只鸟,这是一架飞机,它是超人!去氪石有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;
}
Working Example
Broken Example 1 (note the overlap)
Broken Example 2 (note the overlap)
nope | you may be right | yeah! | muahaha |
It's a bird, | it's a plane, | it's Superman! | Go get the kryptonite |
It's a bird, | it's a plane, | it's Superman! | Go get the kryptonite |