块元素的背景图像位于float元素后面

Ste*_*ler 3 html css background-image css-float

我对块元素上的背景图像有一个小问题,前面是浮动元素.

我将图像向左浮动,然后是a H1.正如所料,H1(这是一个blocl级元素)在图像后面流动,但它的内容(实际标题)出现在图像的右侧.

不幸的是,我正在使用的背景图像H1必须与左边对齐,因此出现在实际后面img,因为与内容不同,它不会被浮动行为推动.

例:

http://jsfiddle.net/WwuqG/

(我将第二个标题设置clear: left为显示它应该是什么样子).

一种解决方案是将标题的左边距设置为略大于浮动图像的宽度,但这需要我事先知道它的宽度.

另一种选择是在其中的元素中添加标题的图标h1,但这在语义上并不正确.

是否有更好的仅css解决方案,不需要额外的元素?

cla*_*uzy 10

添加overflow:hiddenh1

小提琴