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

Question

我有一些相当基本的标题、图像和一些文本标记（示例）：

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

< strong>我想将图像浮动到前面的标题和后面的段落的左侧，而不更改 HTML。

理想情况下，我只需将图像浮动到左侧：

img {
  float: left;
}

但是因为标题出现在图像之前标记，标题将跨越整个容器：

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

我希望它看起来像：

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

我迄今为止的努力（ Dabblet)

我可以将

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

Answer 1

这是一种可能的方法。

标记：

<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，第一个答案的解决方案是迄今为止最好的。但我不喜欢使用定位。