HTML: Как поместить два изображения одно над другим в одной строке с текстом?

Question

Есть ли способ поместить два изображения одно над другим в одну строку с текстом?Это пример для трех строк, а во второй строке есть два изображения одно над другим после слов «текста», а затем продолжить текст как обычно?будь то 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/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

Answer 3

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>