css - 标记中前一个元素周围的 float 元素

Question

我有一些相当基本的标题、图像和一些文本标记 ( example ):

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

我想在不更改 HTML 的情况下将图像 float 到前一个标题和后一段的左侧。

理想情况下，我只是将图像向左浮动:

img {
  float: left;
}

但是因为 header 出现在标记中的图像之前，所以 header 将跨越整个容器:

/-----------------------------------------\
| 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)

我可以 float <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 中):