将h1标题右对齐到一个浮动图像的旁边

Question

我有以下代码：

<div>
    <img class="left" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&amp;text=.img">
    <h1>
    Biografie
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</div>

这是我使用的CSS：

img { float:left; width:150px; margin-right:1em; margin-top:5px; }
h1 { background:red; }
p { overflow:hidden;}

我在如何正确显示h1元素与图像相关的margin-right:1em方面遇到了困难（就像p元素一样），而不使用h1元素上的padding-left（因为由于响应性等原因，图像的大小会变化）。

这里是一个演示：https://jsfiddle.net/ukwn43y2/1/ 有什么提示吗？

编辑：我正在寻找一种“纯”css方法，而不是编辑html；添加用于文本部分的容器div是可能的，但不是我要寻找的...

- EM Em

---

你能更好地解释一下期望的结果是什么吗？ - Alvaro Silvino

当您查看我的fiddle时，您会发现红色背景从img“后面”开始；我希望它像下面的p元素一样开始（在图像左侧有1em的边距），并让红色背景在最右侧结束，就像p元素一样。最好不要更改HTML。 - EM Em

你尝试过在 h1 上使用 overflow:hidden; 吗？ - Alvaro Silvino

Answer 1

您可以尝试仅隐藏 image 和 h1 的溢出部分：

h1 { background:red; overflow:hidden;}

https://jsfiddle.net/ukwn43y2/5/

- Alvaro Silvino

---

没问题，我很高兴能帮到你 @EMEm - Alvaro Silvino

Answer 2

你尝试过在h1元素上设置display:inline;吗？

https://jsfiddle.net/tz8fs40x/

h1 { background:red; display:inline; }

- Adrian P.

---

谢谢你的回答，Adrian！是的，我试过了...但我想让h1元素向右“完全宽度”，这样它就会在末尾“停止”。 - EM Em