文本到 Div 的底部

Question

有没有办法让 div 的内容文本到它的底部？ 这里我准备了一个例子。

http://jsfiddle.net/JGuP7/

这是示例层次结构：

<div class="button">Button Label</div>

我正在尝试在不添加额外跨度或更改层次结构的情况下实现结果。

Answer 1

三种可能的解决方案，尽管每种都有自己的注意事项。

jsFiddle demo

第一个解决方案依赖line-height: 220px; vertical-align: bottom; 将文本与DIV 的底部对齐。第二种解决方案创建一个:before 伪元素，将文本推到DIV 的底部（这不需要额外的标记）。两种解决方案都将在 IE7 或更早版本中失败，并且在以下情况下都会出现问题：

• 字体大小改变
• 文本换到第二行
• 包含元素的大小发生变化

第三种解决方案依赖于 display: box; 属性，这是一个正在逐步淘汰的 CSS 属性（更多详细信息请参见 Quick Hits With the Flexible Box Model）。仅从 v4 开始的 Chrome、从 v2 开始的 Firefox 和 IE10 beta 支持此解决方案。然而，一个新的 Flexbox 标准已经标准化，但浏览器支持却很少。该解决方案可能被认为“太新”而无法有效使用 (html5please.com/#flexbox)。

一般来说，您应该考虑在文本周围添加一个新的环绕元素，这将允许position: absolute; bottom: 0; 将元素置于父元素的底部。这具有随着字体大小或文本长度增加而向上 增大子元素的好处，并且与父容器的尺寸无关。根据您的定位对布局的关键任务程度，您可以使用 Javascript 添加这个新元素。考虑到您提出的问题，这可能并不理想，但浏览器支持对于我上面列出的更古怪的 CSS 解决方案来说并不理想：-p

Answer 2

另一种方法是使用“display: table-cell”和“vertical-align:bottom”。

http://jsfiddle.net/JGuP7/1/

.button {
    display: table-cell;
    background-color: darkred;
    color: white;
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: bottom;
}

Answer 3

如果在容器中使用position:relative，则使用

position:absolute;
bottom:0;

在内容上，可以达到想要的效果。

您的 CSS 可能如下所示：

    .button
    {
        display: block;
        background-color: darkred;
        color: white;
        width: 120px;
        height: 120px;
        text-align: center;
        position: relative;
    }
    .bottomContent
    {
        position:absolute;
        bottom: 0;
    }

和你的 HTML：

<div class="button"><p class="bottomContent">Button Label</p></div>

Source