Question

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

这是样本层次结构：

<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

文字到底部

3 个答案: