html里面注释浮动框,html – 具有自己流程的CSS浮动注释

更新

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

目标

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

nope

It's a bird,

still no

it's a plane,

yeah!

it's Superman!

muahaha

Go get the Kryptonite

工作实例

下面这句话是一只鸟,这是一架飞机,它是超人！去氪石有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

nope

It's a bird,

still no

it's a plane,

yeah!

it's Superman!

muahaha

Go get the Kryptonite

Broken Example 1 (note the overlap)

nope

It's a bird,

you may be right

it's a plane,

yeah!

it's Superman!

muahaha

Go get the Kryptonite

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

How it should look (cheating with positioning)

nope

It's a bird,

you may be right

it's a plane,

yeah!

it's Superman!

muahaha

Go get the Kryptonite