如何用 HTML 和 CSS 实现图像置于文本左侧的布局？

如何在 HTML 中实现此样式？

此问题涉及创建带有文本和图像的布局，其中图像位于文本的左侧。要实现此样式，请使用以下 HTML 代码：

<p>
  <span><img src="image.png" alt="Image"></span>
  <span>文本</span>
</p>

然后，使用 CSS 为此 HTML 代码设置样式。例如，使用 Flexbox 布局将文本和图像水平排列：

p {
  display: flex;
  align-items: center;
}

img {
  margin-right: 10px;
  flex-shrink: 0;
  flex-grow: 0;
}

这种样式设置文本和图像水平排列，并且文本围绕图像换行。还可以通过调整 margin-right 值来更改图像和文本之间的间距。