在文本左侧添加图像答案

【问题标题】：Add image to the left of text在文本左侧添加图像
【发布时间】：2020-05-21 00:21:52
【问题描述】：

我需要为一个页面创建内容，该页面在一个内容的左侧有一个小图标图像。

我认为这很容易弄清楚，但我无法让文本与图像的底部对齐。例如，请参阅附件图片，了解我想要弄清楚的内容。这是我一直在使用的代码：

<p>
<img src="http://www.example.com/smiley.jpg" alt="Smiley face image" 
style="float:left; width:42px; height:42px;"><span style="vertical-align:bottom">This 
is one line of text with image on the left side</span>
</p>

有什么建议吗？

【问题讨论】：

标签： html css inline paragraph

【解决方案1】：

您可以使用 CSS flexbox 来实现这一点，在段落中添加 display: flex，并对齐文本元素 align-self: flex-end;。阅读有关Flexbox at MDN 的更多信息。

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

.text {
  align-self: flex-end;
}

.image {
  width: 42px;
  height: 42px;
}

.paragraph {
  display: flex;
}

<p class="paragraph">
  <img src="https://i.imgur.com/OxHKeTw.gif" alt="Smiley face image" class="image"><span class="text">This is one line of text with image on the left side</span>
</p>

【讨论】：

【解决方案2】：

你需要使用float:left吗？为什么不将图像作为inline-block 插入行首？如果您愿意，可以添加填充以使其与文本的开头分开。

<p><img src="http://placekitten.com/42/42" alt="" 
style="display:inline-block; padding-right:10px; width:42px; height:42px;">This 
is one line of text with image on the left side</p>

【讨论】：

谢谢大家的解决方案！！这个例子的措辞为页面。再次感谢您！

【解决方案3】：

另一种方法是使用位置

<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>

【讨论】：