使用 CSS 而不是 HTML 将图像与标题对齐

Question

我想知道一种使用 css 将图像（使用浮动或对齐）对齐到我网站上标题文本右侧的方法。我们有很多标题，它们下面只有一段左右的文本，并且由于标题当前想要占据自己的行，因此很难以美观的方式在文本中插入图像。

很遗憾，我无法让 jsbin 链接正常工作，否则我会在 OP 中提供它。

到目前为止，我发现的唯一方法是将标题样式更改为内联，但这会产生很多其他问题。我想知道是否可以通过 CSS 为所有图像更改此设置，而不是在每个实例中摆弄 html。

我附上了下面问题的截图。

谢谢。

<p class="intro">The Broadland Rivers Catchment is relatively large at around 3,200km² and is mostly rural &#8211; over 80% is arable farmland. It includes around two thirds of Norfolk and part of north Suffolk. The largest settlements include the city of Norwich and the seaside towns of Great Yarmouth and Lowestoft, where major regeneration is planned.</p>

江湖

四个主要河流（和子流域）是......

Image depicting h text not aligning to side of image

Answer 1

你可以这样做：

.img{
  float:right;
  height:100px;
  width:100px;
  background-color:#888;
}

<div class="img">image placeholder</div>
<p class="intro">The Broadland Rivers Catchment is relatively large at around 3,200km² and is mostly rural &#8211; over 80% is arable farmland. It includes around two thirds of Norfolk and part of north Suffolk. The largest settlements include the city of Norwich and the seaside towns of Great Yarmouth and Lowestoft, where major regeneration is planned.</p>