在文本之后放置图像而不在行之间添加 space

Question

在此fiddle https://jsfiddle.net/spdvoc06/ 最后一行被拉伸以放置图像。谁能帮忙修一下？我需要在文本之后放置第二张图片而不在行之间添加 space 。

<img src="https://www.getdesignschool.com/wp-content/uploads/2015/07/up.jpg" alt="" width="56" height="44" />
<p style="display:inline;">I want to learn how to design but I spend so much time just reading I never remember it all. I need something that teaches me in practical way, and gives me feed-back on what I've created...
</p>
<img src="https://www.getdesignschool.com/wp-content/uploads/2015/07/bottom.jpg" alt="" width="56" height="44" />

Answer 1

将 display:inline-block 和 width 添加到 paragraph 将修复它。

演示：https://jsfiddle.net/spdvoc06/1/

Answer 2

看起来所有需要添加的都在最后一张图片上 "vertical-align:top"

我添加了它并为您复制了代码。希望这对您有所帮助！

   <img style="vertical-align:top" src="https://www.getdesignschool.com/wp-content/uploads/2015/07/bottom.jpg" alt="" width="56" height="44" />

https://jsfiddle.net/spdvoc06/

Answer 3

将position:absolute添加到最后一张图片

https://jsfiddle.net/y93su8s1/2/

在文本之后放置图像而不在行之间添加 space

Placing image after text without adding space between lines

html

css

image

css-position