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;
}

演示http://jsfiddle.net/thc9c/1/

Answer 2

在line-height规则

中添加h1

h1 {
    font-size: 2em;
    line-height: 1em;
}

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

Answer 3

您可以使用绝对位置：http://cdpn.io/KBhuG

Answer 4

我想我已经为你找到了：

DEMO

CSS：

h1 {
    display:inline;
    font-size: 2em;
}
h1 span {
    line-height: 3.25em;
    float: right;
    font-size: 0.5em;
}

使用行高属性并做一些数学运算，我发现你的跨度的完美行高是3.25。我通过calculator找到了这个，并且还引用了一些其他堆栈溢出问题。基本上，构造是将您的ems更改为pxs，将您的px乘以黄金比率（1.618），然后将该数字转换回ems。

像这样：2 em等于32px，然后32px * 1.618等于58（舍入），然后58px等于3.25 ems。