在没有换行占位符的文本旁边插入链接图片

Question

在 Jekyll markdown post 上，我想在 div 旁边插入一张图片 （在下图中：红色框） （蓝色）。下图中，红框的位置很完美。 重要提示：图片链接到div（此处："Text of red box"）中的一些文字内容。但是我这样做的方式是，该框在蓝色 div 中创建了一个占位符并导致提前换行。 如何让红色框浮动在文本中锚点高度的div旁边而不在div中创建空的space？

代码如下：

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

Answer 1

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

Answer 2

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

也许这有帮助...

Answer 3

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

Answer 4

将位置更改为 position: absolute;

JSFiddle

在没有换行占位符的文本旁边插入链接图片

Insert linked picture next to text without line break-causing placeholder

html

javascript

css

markdown

jquery