我有一篇文章，其中包含标题 (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 的解决方案。
最佳答案
自然的事情是改变标记 - 这是一个使用定位和负边距的笨拙的黑客(假设图像宽度是已修复) - 请参阅下面的演示:
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>关于css - 标题显示在 float 图像上方而不是右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55079374/