HTML：如何将两张图片彼此放在同一行的上方？

Question

有没有一种方法可以将两张图片彼此放在同一行上，放在同一行上？此示例为三行，第二行在单词“ of of text”之后有一个图像在另一个图像的上方，然后正常继续该文本？是否使用CSS或表格或其他内容？

我尝试将它们放在div或图像块中，但确定如何实现它。可以将它们一个放在另一个上方的表格单元格中，但是表格并不与文本并排，它们可以在段落的右边或左边浮动，而不是在中间。

示例图片链接：1，2。您可以使用它们在jsfiddle.net或其他可能的地方进行演示。

Answer 1

使用line-height和display:inline-block

p{
  line-height:40px;
  
}
span{
  display:inline-block;
  vertical-align:middle;
}
img{
  width:20px;
  display:block;
}

<p>Is there a way to put two images one above the other in the same line with text? This example for three lines, and the second line has two images one above the other after <span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag"></span> the words "of text" and then continue the text normally? whether using css or a table or anything?</p>

Answer 2

https://jsfiddle.net/kb1tc9r4/11/

这是css代码使用flexbox实现该目标的解决方案

.images {
  display: inline-flex;
  flex-direction: column;
}

<div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text <div class='images'>
  <img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS'>
  <img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag'>
</div>text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text
</div>

Answer 3

这里是另一个小提琴https://jsfiddle.net/y7notgbp/

您只是一个很小的CSS和HTML。将图像高度设置为0.5em可确保图像适合线条。外部元素需要将内联块设置为显示属性，而图像需要将块设置为显示属性。

.inline-images{
  display: inline-block;
}
.inline-images img{
  height: 0.5em;
  display: block;
}


Blaaa  

<span class="inline-images">
  <img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png"> 
  <img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png"> 
</span>

blaa