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

【问题标题】：Title is displayed above floated image instead of to the right of it标题显示在浮动图像上方而不是右侧
【发布时间】：2019-07-31 10:33:35
【问题描述】：

我有一篇文章，其中包含标题 (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 的解决方案。

【问题讨论】：

标签： css html alignment css-float css-position

【解决方案1】：

<h4> 有一个默认的display 块，占据整行。给它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>

【讨论】：

感谢您的回答。然而，问题是如何在不以任何方式更改 HTML 的情况下在 CSS 中执行此操作。添加中断会更改 HTML。
@CaptainSensible 抱歉，我没看到。我会马上回答问题
@CaptainSensible 这有点难，因为所有文本都不在任何特定元素内。你能改变它还是我应该尝试找到一个解决方法？

【解决方案2】：

很自然的事情是更改标记 - 这是一个 笨拙的 hack 使用 positioning 和 负边距（假设图像宽度为已修复） - 请参见下面的演示：

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>

【讨论】：