Html 文本到 Div 底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14711647/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text to Bottom of Div
提问by Mia
Is there any way to get the content text of a div to the bottom of it? Here I've prepared an example.
有什么办法可以将 div 的内容文本放到它的底部吗？这里我准备了一个例子。
This is the sample hierarchy:
这是示例层次结构：
<div class="button">Button Label</div>
I'm trying to achieve the result without adding additional spans or changing the hierarchy.
我试图在不添加额外跨度或更改层次结构的情况下实现结果。
回答by thirdender
Three possible solutions, although each has its own caveats.
三种可能的解决方案，尽管每个都有自己的注意事项。
The first solution relies on line-height: 220px; vertical-align: bottom;to align the text with the bottom of the DIV. The second solution creates a :beforepsuedo-element that pushes the text to the bottom of the DIV(this requires no additional markup). Both solutions will fail in IE7 or earlier, and both will have issues if:
第一个解决方案依赖于line-height: 220px; vertical-align: bottom;将文本与DIV. 第二种解决方案创建了一个:before将文本推到底部的伪元素DIV（这不需要额外的标记）。这两种解决方案都将在 IE7 或更早版本中失败，并且在以下情况下都会出现问题：
- The font size changes
- The text wraps to a second line
- The size of the containing element changes
- 字体大小改变
- 文本换行到第二行
- 包含元素的大小发生变化
The third solution relies on the display: box;property, which is a CSS property that is being phased out (more details at Quick Hits With the Flexible Box Model). This solution is only supported by Chrome since v4, Firefox since v2, and IE10 beta. However, a new Flexbox standard has been standardized, but browser support is minimal. This solution could be considered "too new" to be used effectively (html5please.com/#flexbox).
第三种解决方案依赖于display: box;属性，这是一个正在逐步淘汰的 CSS 属性（更多详细信息，请参见Quick Hits With the Flexible Box Model）。此解决方案仅支持自 v4 起的 Chrome、自 v2 起的 Firefox 和 IE10 测试版。然而，新的 Flexbox 标准已经标准化，但浏览器支持很少。此解决方案可能被认为“太新”而无法有效使用（html5please.com/#flexbox）。
Generally speaking, you should consider a new wrapping element around your text which will allow for position: absolute; bottom: 0;to cozy the element to the bottom of the parent element. This has the benefit of growing the child element upwardsas the font size or text length increases, and is agnostic to the parent container's dimensions. Depending on how mission critical your positioning is to your layout, you could add this new element using Javascript. This probably isn't ideal given the question you've posed, but browser support isn't less than ideal for the more wacky CSS solutions I've listed above :-p
一般来说，您应该考虑在文本周围添加一个新的环绕元素，以便position: absolute; bottom: 0;将元素放置在父元素的底部。这有利于子元素随着字体大小或文本长度的增加而向上增长，并且与父容器的尺寸无关。根据您的定位对布局的关键任务，您可以使用 Javascript 添加这个新元素。鉴于您提出的问题，这可能并不理想，但是对于我上面列出的更古怪的 CSS 解决方案，浏览器支持并不理想：-p
回答by Billy Moat
Another way to to do this would be by using "display: table-cell" and "vertical-align: bottom".
另一种方法是使用“显示：表格单元格”和“垂直对齐：底部”。
.button {
display: table-cell;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
vertical-align: bottom;
}
回答by MikeB
If you use position:relativein the container, and use
如果您position:relative在容器中使用，并使用
position:absolute;
bottom:0;
in the content, you can achieve the desired result.
在内容上，可以达到预期的效果。
Your CSS might look like:
您的 CSS 可能如下所示：
.button
{
display: block;
background-color: darkred;
color: white;
width: 120px;
height: 120px;
text-align: center;
position: relative;
}
.bottomContent
{
position:absolute;
bottom: 0;
}
and your HTML:
和你的 HTML：
<div class="button"><p class="bottomContent">Button Label</p></div>
