如何对齐位于 div 内的两个跨度的顶部？

Question

我正在尝试使猫图片的顶部与下图中的文字顶部垂直对齐：

如您所见，文字低于图片。

这里是 CSS 和 HTML:

<div>
  <span style="vertical-align: top; width: 5%; float: left"><img width="80px" src="./5 Bilder_Logos/cat.jpeg"/></span>
  <span style='vertical-align: top; width: 95%; float: right;font-size:10.0pt;font-family:"Arial","sans-serif";color:black'><o:p>&nbsp;</o:p></span></p>
  <p class=EinfAbs style='margin-top:5.65pt'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
  <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
</div>

网上搜索类似的问题，答案好像是用vertical-align: top。这对我的情况没有帮助。谁能帮我解决这个问题？谢谢

只有一件事：答案必须使用基本 css，不能使用网格或 flexbox。这是因为我需要它在所有浏览器上都可见。

Answer 1

试试这个：

.html

<div class="example">
  <img src="…">
  <p>Award……</p>
</div>

.css

.example {
  display: inline-block;

  img, p {
    vertical-align: top;
  }
}

我建议您删除所有样式属性并将其放入类 :)

Answer 2

最好使用弹性框而不是浮动和垂直对齐。

<div class="box" style='display: flex;'>
    <img width="120px" height="120px" src="./5 Bilder_Logos/cat.jpeg"/>
    <div class="content" style="margin-left: 15px;">
        <p class=EinfAbs style='margin-top:0;'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
        <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
    </div>
</div>

并使用 align-items: flex-start; 对齐您的框内容。

如何对齐位于 div 内的两个跨度的顶部？

how to align the tops of two spans located inside of a div?

html

css

vertical-alignment