html - 文本到 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)。此解决方案仅受 Chrome since v4、Firefox since v2 和 IE10 beta 支持。然而，新的 Flexbox 标准已经标准化，但浏览器支持很少。该解决方案可能被认为“太新”而无法有效使用(html5please.com/#flexbox)。

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