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

【问题标题】：How to bottom align a title of variable length如何底部对齐可变长度的标题
【发布时间】：2012-11-28 12:43:28
【问题描述】：

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

标题的长度可以是可变的，所以我试图弄清楚如何在所有情况下对齐边框底部。

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

<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做这个。我可能会对字符进行计数并添加一个边距顶部，但这不是 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;
}

【问题讨论】：

我不太明白你想要什么。你是说你想让.header-container不管内容是什么宽度都拉伸页面的宽度？
请解释你发布的小提琴有什么问题，你想改变什么？我不清楚..
@Everyone 他希望“短标题”被关闭，所以边框与另一个h1 边框对齐。而不是手动做margin-top:XXpx

标签： html css

【解决方案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;
}

【讨论】：

好吧，基本上我的例子很糟糕，因为我只有一个标题，上面的方法只有在已经有一个 div 占据双行高度时才有效，我确实有，但它在一个单独的容器中.你的方式更干净，但不幸的是我认为我需要一个肮脏的黑客来解决我的问题，Praveen Kumar 提供了
没关系。我只是想确保自己没有犯愚蠢的错误。

【解决方案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

【讨论】：

这个（也可能是任何其他纯 CSS）解决方案的问题是你必须给容器一个固定的高度。因此，如果您有一排所有标题只有一行，那么您将在它们顶部有额外的空白。
@teevee 提供height 不是强制性的。你可以去掉高度！

【解决方案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

【讨论】：