把文本放在div的底部

我有4个DIV紧挨着对方，它们都集中在屏幕中间。 我在每个div中都有两个单词，但是我不希望他们在顶部，我希望他们出现在div的右下angular。 我怎样才能做到这一点？

Answer 1

用span或类似的方式包装文本，并使用下面的CSS …

 .your-div { position: relative; } .your-div span { position: absolute; bottom: 0; right: 0; } 

Answer 2

 <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; } 

在http://jsfiddle.net/7YTYu/2/查看工作示例;

Answer 3

如果你只有一行文本，你的div有一个固定的高度，你可以这样做：

 div { line-height: (2*height - font-size); text-align: right; } 

看小提琴 。

Answer 4

我认为使用弹性框（ 兼容性 ）比绝对位置更好。 这里是我在纯CSS的例子。

 .container{ background-color:green; height:500px; /*FLEX BOX */ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -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> 

Answer 5

谢谢@哈里下面的代码适用于我：

 .your-div{ vertical-align: bottom; display: table-cell; }