在文本旁边插入链接的图片，没有导致换行符的占位符答案

【问题标题】：Insert linked picture next to text without line break-causing placeholder在文本旁边插入链接的图片，没有导致换行符的占位符
【发布时间】：2017-01-03 02:51:20
【问题描述】：

在 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.

还有css：

.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;
    content:"";
}

【问题讨论】：

使用 float:img 的权利
我使用 float:right 作为引用部分。如果我使用 float:right 作为旁注跨度，文本“红框文本”也会浮动，这不是我想要的。

标签： javascript jquery html css markdown

【解决方案1】：

将位置更改为position: absolute;

JSFiddle

【讨论】：

【解决方案2】：

显然，margin-right: -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:"";
}

【讨论】：

【解决方案3】：

尝试将图像放在 div 中。将 div 设置为 position: relative; 将 img 设置为 position: absolute;右：-x 像素

也许这有帮助...

【讨论】：

【解决方案4】：

使用该代码：我使用float:right 来执行此操作 code

【讨论】：

我使用 float:right 作为引用部分。如果我使用 float:right 作为旁注跨度，文本“红框文本”也会浮动，这不是我想要的。
是的，我可以看到您的代码。在您当前的示例中，红色框仍保留在 div 中。