CSS浮动注释与自己的流程
更新
我忍受了赏金,但从未实现过正确的答案.我已经实现了一个适用于我的JS解决方案,但我不打算将答案标记为正确.如果只使用CSS/HTML,我仍然希望看到它.但普遍的共识是,目前还不可能.
目标
CodePen在这里,底部是runnable片段.
我有一些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>
工作实例
下面,句子It's a bird, it's a plane, it's Superman! Go get the Kryptonite有4个独立的部分(4个content),每个部分用不同的颜色表示.每条内容都有自己的内容annotation,上面用斜体显示.
我有这个工作,通过制作内容和注释,float: left并给予注释否定margin.这是CodePen中的示例1.
破碎的例子1
注释比内容长时会发生此问题.下面,注释still no已经变为更长you may be right.两个内容行继续遵循正常的内联流(根据需要),但由于注释仍然排列在其内容的左边缘,因此它们重叠.
这是CodePen中的示例2.
破碎的例子2
建议的解决方案是使用表visibility:collapse来进行对齐,这在防止重叠方面很有效,但是在注释开始经过内容的左边缘的情况下,它会在注释之后产生额外的空间.
应该如何运作
我希望注释遵循自己的流程,但不会破坏内容的自然内联流.请参阅下文,内容行仍然是一个单一的完整句子,但是yeah!向右移动以允许长期you may be right拥有它所需的所有空间.然而,muahaha更正了,因为它有空间直接坐在上面Go get the kryptonite.
我可以更改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: 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>
<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 a plane, </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: 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' 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>我不确定这是否是你想要的，但这里是修改过的 CodePen
HTML：
<!-- first group -->
<div class='item'>
<div class='annotation'>I'm an annotation</div>
<div class='content'>I am the actual content </div>
</div>
<div class='item'>
<div class='annotation'>I'm a second annotation</div>
<div class='content'>I am a second piece of content</div>
</div>
<!-- second group -->
<div class='item'>
<div class='annotation'>I'm a particularly long annotation</div>
<div class='content'>I am the actual content </div>
</div>
<div class='item'>
<div class='annotation'>I'm a second annotation</div>
<div class='content'>I am a second piece of content</div>
</div>
CSS：
.item {
font-size: 20px;
margin-top: 30px;
float: left;
}
.content, .annotation {
white-space: pre;
}
.annotation {
margin-top: -25px;
font-style: italic;
}
我基本上将 float:left 声明从.content, .annotationelements 移至.item.
希望这可以帮助。