Html 将图像添加到文本的左侧

我需要为一个页面创建内容，在内容的一句话的左边有一个小图标图像

我认为这将是相当简单的计算，但我不能让文本与图像的底部对齐。 请参阅附件中的图片，以了解我想要了解的内容。 这是我一直在使用的代码：

这
是一行文本，图像在左侧

---

有什么建议吗？

您可以使用CSS flexbox实现这一点，在段落中添加

display:flex

，并对齐文本元素

align self:flex end。阅读更多关于

使用
float
现在被认为是一种不好的做法，因为有更好的选择


.text{
自对准：柔性端；
}
.形象{
宽度：42px；
高度：42px；
}
.段{
显示器：flex；
}

这是一行文本，图像在左侧
您可以使用CSS flexbox实现这一点，在段落中添加
display:flex
，并对齐文本元素
align self:flex end。阅读更多关于

使用
float
现在被认为是一种不好的做法，因为有更好的选择


.text{
自对准：柔性端；
}
.形象{
宽度：42px；
高度：42px；
}
.段{
显示器：flex；
}

这是一行文本，图像在左侧
是否需要使用
浮动：左
？为什么不在行首插入图像作为
内联块
？如果愿意，可以添加填充，使其与文本开头分开


这个
是否有一行文本左侧有图像
是否需要使用
float:left
？为什么不在行首插入图像作为
内联块
？如果愿意，可以添加填充，使其与文本开头分开


这个
是一行左边有图像的文本
另一种方法是使用位置

<p style="position: relative; overflow: auto">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png"
     alt="Smiley face image"
     style="float:left; width:42px; height:42px;">
<span style="position:absolute; bottom: 0">This is one line of text with image on the left side</span>


这是一行文本，图像在左侧

另一种方法是使用位置

<p style="position: relative; overflow: auto">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png"
     alt="Smiley face image"
     style="float:left; width:42px; height:42px;">
<span style="position:absolute; bottom: 0">This is one line of text with image on the left side</span>


这是一行文本，图像在左侧

谢谢大家提供的解决方案！！这个例子是为这个页面设计的。再次感谢你！谢谢大家提供的解决方案！！这个例子是为这个页面设计的。再次感谢你！