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

我正在努力研究如何在关于margin-right:1em;（就像p元素那样）的图像中直接显示h1元素而不在h1元素上使用padding-left（因为由于响应性等原因，图像的大小会有所不同。

这是一个小提琴：https://jsfiddle.net/ukwn43y2/1/

并提示如何做到这一点？

编辑：我正在寻找一种“纯粹”的CSS方式而不需要编辑html;为文本部分添加容器div是可能的，但不是我正在寻找的......

Answer 1

您可以尝试隐藏image和h1：

中的溢出

h1 { background:red; overflow:hidden;}

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

Answer 2

您是否尝试过设置display：inline;在h1元素上？

https://jsfiddle.net/tz8fs40x/

h1 { background:red; display:inline; }

将h1对齐浮动图像的右侧

2 个答案: