Html 如何垂直对齐跨文本（浮动）到底部

我现在有一个结果：

但它应该是这样的：

m和s应与底部对齐

我的代码：

。右侧计时器区域{
宽度：128px；
高度：52px；
线高：52px；
字体大小：36px；
字体大小：300；
颜色：#ffa000；
浮动：对；
利润率：0.50px 0.0；
}
.右侧定时器区域>span.定时器居中{
高度：36px；
显示：内联块；
垂直对齐：中间对齐；
}
.右侧定时器区域>span.定时器居中span{
显示：内联块；
浮动：左；
线高：1；
垂直对齐：底部对齐；
}
.右侧计时器区域.计时器sm{
字体大小：16px；
}

15
M
-
45
s

您可以使用

显示：表格单元格

并从

中删除
浮动：左
。右定时器区域span。定时器居中span

：

。右侧计时器区域{
宽度：128px；
高度：52px；
线高：52px；
字体大小：36px；
字体大小：300；
颜色：#ffa000；
浮动：对；
利润率：0.50px 0.0；
}
.右侧定时器区域>span.定时器居中{
高度：36px；
显示：内联块；
垂直对齐：中间对齐；
}
.右侧定时器区域>span.定时器居中span{
显示：表格单元格；/*更改为表格单元格*/
线高：1；
垂直对齐：底部对齐；
}
.右侧计时器区域.计时器sm{
字体大小：16px；
}

15
M
-
45
s

您的问题是添加了

float:left至
。右侧计时器区域>span。以计时器为中心span
。这将覆盖
显示：内联块表示
垂直对齐
无效。要获得所需结果，请进行以下更改：


移除
浮动：左侧来自
。右侧计时器区域>span。以计时器为中心span

将
.right timer area.timer sm
更改为
.right timer area>span.timer-centered.timer sm
，使其更具体。这将确保它覆盖在
.right timer area>span.timer-centered span
添加
垂直对齐：sub至
。右侧计时器区域>span.timer-centered.timer sm

删除HTML中
span
s之间的空格，方法是删除实际空格，将
timer-centered
的
font-size
减小为
0
，或者使用注释技巧


。右侧计时器区域{
清楚:对,；
宽度：128px；
高度：52px；
线高：52px；
字体大小：36px；
字体大小：300；
颜色：#ffa000；
浮动：对；
利润率：0.50px 0.0；
}
.右侧定时器区域>span.定时器居中{
高度：36px；
显示：内联块；
垂直对齐：中间对齐；
}
.右侧定时器区域>span.定时器居中span{
显示：内联块；
线高：1；
垂直对齐：底部对齐；
}
.右侧计时器区域>span.计时器居中。计时器sm{
字体大小：16px；
垂直对齐：次对齐；
}
.右侧计时器区域.字体大小{
字号：0；
}
.右侧计时器区域span.fontsize span{
字体大小：36px；
垂直对齐：基线；
}

15米-45秒
15
M
-
45
s
15米-45秒
你可以这样试试-


。右侧计时器区域{
/*宽度：128px*/
高度：52px；
线高：52px；
字体大小：36px；
字体大小：300；
颜色：#ffa000；
浮动：对；
利润率：0.50px 0.0；
显示：表格；
}
.右侧定时器区域>span.定时器居中{
高度：36px；
显示：内联块；
垂直对齐：中间对齐；
显示：表格行；
}
.右侧定时器区域>span.定时器居中span{
显示：内联块；
/*浮动：左*/
线高：1；
垂直对齐：底部对齐；
显示：表格单元格；
}
.右侧计时器区域.计时器sm{
字体大小：16px；
}

15
M
-
45
s
您可以尝试使用下标标签。请查看我的答案，先生。为什么不使用
sub
tag？@Maddy sub没有直接在一条底线上定位元素。请检查我的答案Sir@brabertaser1992m在我的代码中，s不在一条底线上，我不能删除空格并获得额外的空间，这就是为什么我要用floating@brabertaser1992我添加了一些额外的方法，可以用来删除空白。希望其中至少有一个是有用的！