文本到底部 [英] Text to Bottom of Div
问题描述
有什么办法可以获得div的内容文本到底部吗？
这里我准备了一个例子。
这是示例层次结构：
< div class =button>按钮标签< / div>
我试图在不添加额外跨度或更改层次结构的情况下实现结果。
三种可能的解决方案，虽然每种都有自己的注意事项。
第一个解决方案依赖于 line-height：220px; vertical-align：bottom; 以将文本与 DIV 的底部对齐。第二个解决方案创建一个：before psuedo-element，将文本推送到 DIV 附加标记）。两种解决方案都会在IE7或更早版本中失败，并且如果出现以下情况，则两者都会出现问题：
- 字体大小更改
- 文字换行第二行
- 包含元素的大小变化
第三个解决方案依赖于 display：box; 属性，这是一个正在逐步淘汰的CSS属性（更多详细信息，请参见快速点击使用灵活框模型）。此解决方案仅支持Chrome自v4，Firefox自v2和IE10 beta版。然而，新的Flexbox标准已经标准化，但是浏览器支持是最小的。此解决方案可能被视为太新，无法有效使用（ html5please.com/#flexbox ）。
一般来说，你应该考虑一个新的环绕元素，允许 position：absolute; bottom：0; 以将元素舒适地放到父元素的底部。这具有随着字体大小或文本长度增加而向上生长子元素的益处，并且对于父容器的维度是不可知的。根据你的位置对布局的任务关键，你可以使用Javascript添加这个新的元素。考虑到你提出的问题，这可能不是理想的，但是浏览器支持对于我上面列出的更古怪的CSS解决方案来说并不理想:-p
Is there any way to get the content text of a div to the bottom of it? Here I've prepared an example.
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.
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 :before psuedo-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:
- 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).
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 upwards as 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
这篇关于文本到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
