标记中前一个元素周围的浮动元素

Question

我为标题，图片和一些文字（example）提供了一些相当基本的标记：

<div>
  <h1>
  <img>
  <p>
</div>

我想将前一个标题和左边的图像浮动到后续段落，而不更改HTML。

理想情况下，我只是将图像漂浮在左边：

img {
  float: left;
}

但由于标题出现在标记中的图像之前，标题将跨越整个容器：

/-----------------------------------------\
| Header Header Header                    |
| |-------|                               |
| |-Image-|  Paragraph text               |
| |-------|  Paragraph text               |
| |-------|  Paragraph text               |
\-----------------------------------------/

我希望它看起来像：

/-----------------------------------------\
| |-------|  Header Header Header         |
| |-------|                               |
| |-Image-|  Paragraph text               |
| |-------|  Paragraph text               |
| |-------|  Paragraph text               |
\-----------------------------------------/

My efforts so far (Dabblet)

我可以将<h1>向右浮动，但图像的宽度会有所不同，因此我无法为元素指定恒定的宽度。我宁愿保留上面的标记顺序，因为它在语义上更有意义，并且在显示时没有样式。

Answer 1

这是one possible way。

标记：

<div>
    <h2>This is my title</h2>
    <img src="http://dummyimage.com/320x200/ff00ff/fff&text=woooo!" alt="sample" />
    <p>I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML. I'd like to float the image left of both the preceding header and the succeeding paragraph, without changing the HTML.</p>
</div>

CSS：

div { position: relative; }
img { float: left; margin-right: 20px; }
p { position: relative; top: 24px; }
h2 { position: absolute; left: 340px; font-weight: bold; }

可视化示例（在Firefox中）：

Answer 2

到目前为止我的解决方案。

您可以在此处找到它：http://jsfiddle.net/gHNdJ/

希望这就是你要找的东西。

注意：如果你仍然希望保持这样的html，那么第一个答案的解决方案是迄今为止最好的。但我不喜欢使用定位。