Поместите текст внизу div

Question

У меня есть 4 DIV прямо рядом друг с другом, и все они находятся в центре экрана. У меня есть 2 слова в каждом div, но я не хочу, чтобы они были вверху, я хочу, чтобы они появлялись в нижнем правом углу 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

Спасибо @ Гарри, следующий код работает для меня:

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

Answer 5

Я думаю, что лучше использовать гибкие боксы ( совместимость ), чем абсолютную позицию. Вот пример от меня в чистом 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>