把文字放在div的底部

Question

我有4个DIV正好相邻，它们都位于屏幕中间。我在每个div中有2个单词，但我不希望它们位于顶部，我希望它们出现在div的右下角。我怎么能这样做？

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

请参阅fiddle。

Answer 4

感谢@Harry，以下代码适用于我：

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

Answer 5

我认为使用弹性框（compatibility）比绝对位置更好。这是我在纯css中的例子。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;