6

有什么方法可以将 div 的内容文本放到它的底部？这里我准备了一个例子。

http://jsfiddle.net/JGuP7/

这是示例层次结构：

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

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

4

3 回答 3

9

三种可能的解决方案，尽管每个都有自己的警告。

jsFiddle 演示

第一个解决方案依赖于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

于 2013-02-05T16:46:20.540 回答
5

另一种方法是使用“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;
}
于 2013-02-05T16:16:51.393 回答
0

如果您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>

来源

于 2013-02-05T16:07:57.183 回答