如何底部对齐可变长度的标题

Question

我有一个设计，我需要将标题与另一列中的某些内容对齐。

标题可以是可变长度的，所以我试图找出如何在所有情况下对齐border-bottom。

（以下只是一些演示代码以突出我的问题）

<div class="container">
    <div class="header-container">
        <h1>Short title</h1>
    </div>
    <div class="header-container">
        <h1>This is a much longer title title</h1>
    </div>
</div>​

.header-container 
{
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    float: right; 
    border-bottom: 1px solid #bbb;        
}​

请参阅

http://jsfiddle.net/bmxSY/

因此，在短标题的情况下，第一行应为空白。无论如何用纯css做这件事。我可能会对字符进行计数并添加一个margin-top，但这不是100％的傻瓜证明。

修改 的 * 这里真正的问题是标题需要与不同的包含div中的内容对齐。因此，示例HTML标记和CSS应该更像是......

<div class="container">
    <div class="span4">
        <div class="header-container">
            <h1>Short title</h1>
        </div>
    </div>
    <div class="span8">
        <div class="header-container">
            <h1>This is a much longer title title</h1>
        </div>
    </div>
</div>​

.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
}

.span4 
{
    width:60%;
    float: left;
}

.span8
{
    width:40%;
    float: left;
}

Answer 1

最简单的方法是使用display: inline-block：http://jsfiddle.net/thirtydot/bmxSY/7/

.container {
    text-align: right;
}
.header-container {
    width: 200px;
    font-size: 1.4em;  
    margin: 10px 20px; 
    border-bottom: 1px solid #bbb;
    text-align: left;
    display: inline-block;
    vertical-align: bottom;
}​

Answer 2

实际上这是不可能的，但通过欺骗，我们可以做到。

.outer {
    position:relative;
    display:table;
    height: 200px;
    width: 200px;
    vertical-align: middle; 
    text-align: center;
    border: 1px solid #CCCCCC;
    background:red;
    float:left
}
.inner {
    width:100%;
    display:table-cell;
    vertical-align:bottom;
    position:relative;
}
p{background:blue;border:1px solid #000}

演示：http://www.pmob.co.uk/temp/vertical-align9.htm

Answer 3

使用table-cell对齐父级底部的div。

遗憾的是dispaly:table-cell不支持margin选项，因此您需要通过边框进行操作。

<强> CSS

.container{display:table-row; float:right}
.header-container
{
    width: 200px;
    font-size: 1.4em;  
    border-right:20px solid white;   border-left:20px solid white;
    border-top:10px solid white;   border-bottom:10px solid white;
    border-bottom: 1px solid #bbb;        
    display:table-cell; vertical-align:bottom
}

<强> DEMO