H1中的SPAN垂直对齐

我试图将h1中的span内的文本与h1块的底部对齐。H1中的SPAN垂直对齐

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

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

enter image description here

非常感谢！

2014-01-10 KnownColor

你是否希望两条基线位于同一水平线上？ –

@MarcAudet是的，就是这样。 – KnownColor

也许你可以使用position:absolute代替float：

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

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

2014-01-10 18:55:26 DaniP

谢谢，这似乎工作正常。看起来跨度会丢失任何可能的填充/余量（跨度实际上低于h1） - 你知道如何避免这种情况吗？我希望文本的底部对齐 – KnownColor

@KnownColor，这是棘手的问题与aboslute位置。但检查链接在这里我给你提供了另一个解决方案http://jsfiddle.net/6n4H6/。 – DaniP

这是一个很棒的解决方案。谢谢！ – KnownColor

添加line-height您h1规则

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

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

2014-01-10 18:54:34

这几乎可以工作，但跨度并不在底部，在较高的缩放级别下变得更加夸张。 – KnownColor

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

2014-01-10 18:58:24 DenisIsaychX

谢谢，这似乎工作正常。看起来跨度会丢失任何可能的填充/余量（跨度实际上低于h1） - 你知道如何避免这种情况吗？我希望文本的底部对齐。 – KnownColor

您可以在跨度上更改底部属性。或者在跨度上添加margin-bottom。 – DenisIsaychX

downvoted因为该链接已死，答案需要包括代码和奖金是一个链接 –

我想我已经想通了你：

的CSS：

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

使用line-height属性，做一些数学，我发现，完美的线条 - 高度为3.25。我通过calculator发现了这个问题，并且还引导了其他一些堆栈溢出问题。基本上，构造是将您的EMS改为PX，将PX乘以黄金比例（1.618），然后将该数字转换回EMS。

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

2014-01-10 19:40:24 BuddhistBeast

回答