Html 将文本放在 div 底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5288336/
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
Put text at bottom of div
提问by alex
I have 4 DIV's right next to each other, and they're all centered in the middle of the screen. I have 2 words in each div, but I don't want them at the top, I want them to appear in the bottom right hand corner of the div. How can I do this?
我有 4 个相邻的 DIV，它们都集中在屏幕中间。我在每个 div 中有 2 个词，但我不希望它们位于顶部，我希望它们出现在 div 的右下角。我怎样才能做到这一点？
回答by alex
Wrap the text in a spanor similar and use the following CSS...
将文本包裹在 aspan或类似内容中并使用以下 CSS ...
.your-div {
position: relative;
}
.your-div span {
position: absolute;
bottom: 0;
right: 0;
}
回答by Hussein
<div id="container">
<div><span>Two Words</span></div>
<div><span>Two Words</span></div>
<div><span>Two Words</span></div>
<div><span>Two Words</span></div>
</div>
#container{
width:450px;
height:200px;
margin:0px auto;
border:1px solid red;
}
#container div{
position:relative;
width:100px;
height:100px;
border:1px solid #ccc;
float:left;
margin-right:5px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}
Check working example at http://jsfiddle.net/7YTYu/2/
在http://jsfiddle.net/7YTYu/2/检查工作示例
回答by melhosseiny
回答by meck373
Thanks @Harry the following code works for me:
谢谢@Harry 以下代码对我有用：
.your-div{
vertical-align: bottom;
display: table-cell;
}
回答by Skylin R
I think that's better to use flex boxes (compatibility) than the absolute position. Here's example from me in pure css.
我认为使用 flex 框（兼容性）比绝对位置更好。这是我在纯 css 中的示例。
.container{
background-color:green;
height:500px;
/*FLEX BOX */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.elem1{
background-color:red;
padding:20px;
/*FLEX BOX CHILD */
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}<div class="container">
TOP OF CONTAINER
<div class="elem1">
Nam pretium turpis et arcu. Sed a libero. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.
Mauris sollicitudin fermentum libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Quisque id mi.
Donec venenatis vulputate lorem. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Curabitur vestibulum aliquam leo.
</div>
</div>