对齐H1为浮动图片的右侧

我有以下代码：对齐H1为浮动图片的右侧

<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元素在h1元素上没有使用padding-left（因为图像的大小因响应性等因素而变化），而是从关于margin-right:1em;（与p元素一样）的图像中直接显示。

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

而且暗示对如何做到这一点？

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

来源

2016-02-13 EM Em

你能解释一下赌注ter预期的结果是什么？ –

当你看着我的小提琴你可以看到红色背景开始“后面”img;我希望它像下面的p元素一样开始（图像的左边距为1em），并让红色背景像右边的p元素一样结束。最好不要更改html。 –

你尝试过'overflow：hidden;'** h1 **吗？ –

你可以尝试从image只是隐藏溢出和h1：

h1 { background:red; overflow:hidden;}

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

来源

2016-02-13 13:14:55

np，很高兴帮助@EMEM –

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

https://jsfiddle.net/tz8fs40x/

h1 { background:red; display:inline; }

来源

2016-02-13 12:38:21

感谢您的回答阿德里安！是的，我做了......但我希望h1元素在右侧具有“全部”元素;这种方式在最后“停止”。 –

对齐H1为浮动图片的右侧

回答

相关问题