html – 具有自己流程的CSS浮动注释

概述更新 我举起了一个赏金,但是一个正确的答案从未达到.我已经实现了一个适用于我的JS解决方案,但是我不会将答案标记为正确.如果可以使用CSS / HTML,我仍然希望看到它.但普遍的共识是,目前还不可能. 目标 CodePen here,底部可运行的代码段. 我有一些HTML内容,我想用一个在其上方浮动的小消息进行注释,在最左边,就像< ruby​​>注释(但不完全).可以有许多内容,每个都有自己的 更新

我举起了一个赏金,但是一个正确的答案从未达到.我已经实现了一个适用于我的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 ><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 ><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>

解决方法 也许这将适合你：

<table>  <tr>    <td>nope</td>    <td>you may be right</td>    <td>yeah it is!</td>  </tr>  <tr >    <td>It's a bird,</td>    <td>it's a plane,</td>    <td>it's Superman!</td>  </tr></table><table >  <tr>    <td>It's a bird,</td>    <td>it's Superman!</td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – 具有自己流程的CSS浮动注释全部内容，希望文章能够帮你解决html – 具有自己流程的CSS浮动注释所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。