Javascript 在文本旁边插入链接图片，但不使用换行占位符

在Jekyll markdown帖子中，我想在div（蓝色）旁边插入一张图片（下图：红色框）。在下图中，红色框的位置非常完美重要提示：图片链接到div中的某些文本内容（此处为“红色框的文本”）。但我这样做的方式是，该框在蓝色div中创建一个占位符，并导致提前换行如何让红色框浮动在文本中锚定高度处的div旁边，而不在div中创建空白？

代码如下：

The grapefruit (Citrus × paradisi) is a 
<span class="sidenote">
      <cite class="quelle"></cite>
      <span>Text of red box</span>
</span>
subtropical citrus tree known for its sour to semi-sweet fruit. Grapefruit is a hybrid originating in Barbados as an accidental cross between two.
The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its sour to semi-sweet fruit. The grapefruit (Citrus × paradisi) is a subtropical citrus tree known for its sour to semi-sweet fruit.

---

使用该代码：我使用

float:right

来执行此操作

---

尝试将图像放在div中。 将div设置为poasition:relative； 将img设置为位置：绝对；右：-x px

---

也许这有助于…

显然，

右边距：-90px将占位符从div中推出：

.icon-source:before, .sidenote > cite.quelle:before {
    background-size: 45px 45px;
    background-color: red;
    position: relative;
    right: -45px;
    display: inline-block;
    float: right;
    padding-top: -15px;
    width: 45px; 
    height: 45px;
    margin-right: -90px;
    content:"";
}

将位置更改为
位置：绝对

使用浮点：右侧到imgI使用浮点：右侧到引用部分。如果我对侧注跨距使用float:right，文本“红色框的文本”也会浮动，这不是我想要的。我对引用部分使用float:right。如果我使用float:right作为侧注跨距，文本“红色框的文本”也会浮动，这不是我想要的。是的，我可以看到您的代码。在当前示例中，红色框仍保留在div中。
.icon-source:before, .sidenote > cite.quelle:before {
    background-size: 45px 45px;
    background-color: red;
    position: relative;
    right: -45px;
    display: inline-block;
    float: right;
    padding-top: -15px;
    width: 45px; 
    height: 45px;
    margin-right: -90px;
    content:"";
}