标题显示在浮动图像上方而不是右侧

Question

我有一篇文章，其中包含一个标题 (h4)、一个向左浮动的图像和一些文本。

当在 HTML 声明中标题位于图像之前时，它显示在图像上方。
当图像在标题之前时，标题显示在图像的右侧。

这里是 HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      margin: 1em;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>

<body>
  <article id="a1">
    <h4>Title is above image</h4>
    <img src="images/about.jpg" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
  <hr/>
  <article id="a2">
    <img src="images/about.jpg" alt="about" />
    <h4>Title is to the right of image</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
</body>

</html>

上面的 HMTL 呈现如下：

当标题在 HTML 中的图像之前时，如何使用 CSS 将标题呈现在图像的右侧？我正在寻找一种不以任何方式更改 HMTL 的解决方案。

Answer 1

<h4>默认有一个display的block，占了整行。给它一个 display: inline; 的样式，它会使图像和文本与其在同一行。由于图像有float: left;，它会自动向左移动。但是，由于文本仍然在 <h4> 旁边，并且有几个 <br> 可以使它成为您想要的样子。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    img {
      margin: 1em;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>

<body>
  <article id="a1">
    <h4 style="display: inline;">Title is above image</h4>
    <img src="images/about.jpg" alt="about" /> <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
    it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
  <hr/>
  <article id="a2">
    <img src="images/about.jpg" alt="about" />
    <h4>Title is to the right of image</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </article>
</body>

</html>

Answer 2

很自然地会更改标记 - 这是一个 笨拙的技巧 使用定位和 负边距（假设图像宽度是固定的）- 请参见下面的演示：

article {
  clear: both; /* clear the float after each article - this is important */
}

img {
  margin: 1em;
  border: 1px solid black;
  float: left;
}

#a1 {
  padding-top: 30px; /* put some space at the top */
}

#a1 h4 {
  position: absolute; /* positione the title in that space*/
  left: 240px;
  top: -10px;
}

#a1 img {
  margin-top: -15px; /* shift the image to the top */
}

<article id="a1">
  <h4>Title is above image</h4>
  <img src="https://via.placeholder.com/200" alt="about" /> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</article>
<hr/>
<article id="a2">
  <img src="https://via.placeholder.com/200" alt="about" />
  <h4>Title is to the right of image</h4>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</article>

标题显示在浮动图像上方而不是右侧

Title is displayed above floated image instead of to the right of it

html

css

css-position

alignment

css-float