H1中SPAN的垂直对齐

Question

我试图将span内部的文本对齐h1到h1块的底部.

HTML

<h1>
    Left
    <span>Right and Bottom</span>
</h1>

CSS

h1 {
    font-size: 2em;
}    
h1 span {
    float: right;
    font-size: 0.5em;
    vertical-align: bottom;
}

这最终看起来像下面 - 任何人都可以建议我能做什么？

在此输入图像描述

非常感谢!

Answer 1

也许你可以使用position:absolute而不是float:

h1 {
  font-size: 2em;
  position:relative;
}

h1 span {
  position:absolute;
  bottom:0;
  right:0;
  font-size: 0.5em;
}