Расположение изображений / символов под определенными словами - PullRequest
Новая
       40

Расположение изображений / символов под определенными словами

0 голосов
/ 27 января 2020

Я пытаюсь расположить символы (изображения) под определенными словами в строке выше. Каков был бы лучший способ сделать это? Это грамматический пример, поэтому очень важно, чтобы изображения / символы не перемещались на экранах разных размеров.

HTML: 

Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
<img src="https://i.ibb.co/7RsB2B8/subjekt.png" style="width:25px;height:25px;" />   <img src="https://i.ibb.co/QbYvTrY/verballed.png" style="width:25px;height:25px;" />

Вот JSfiddle: https://jsfiddle.net/kmfd45gh/

1 Ответ

1 голос
/ 27 января 2020

Я думаю, что абсолютное позиционирование - единственный выбор: 

<div style="position:relative;">
  Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
  <img src="https://i.ibb.co/7RsB2B8/subjekt.png"
    style="width:25px;height:25px; position: absolute; left:80px;"/>   
  <img src="https://i.ibb.co/QbYvTrY/verballed.png"
    style="width:25px;height:25px; position:absolute; left:120px;"/>
</div>

Завершение «левых» пикселей каждого элемента img методом проб и ошибок

...