Поместите текст в нижней части div

Question

Поместите текст в нижней части div

У меня есть 4 DIV рядом друг с другом, и все они сосредоточены в середине экрана. У меня есть 2 слова в каждом div, но я не хочу, чтобы они были вверху, я хочу, чтобы они появлялись в нижнем правом углу div. Как я могу это сделать?

794 5

html css css3

5 ответов:

Comments

Ничего не найдено.

alex · Accepted Answer · 2011-03-13 10:43:00

оборачивать текст в span или аналогичный и использовать следующий CSS...
.your-div {
    position: relative;
}

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

Hussein · Accepted Answer · 2011-03-13 11:17:12

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

melhosseiny · Accepted Answer · 2011-03-13 11:00:56

Если у вас есть только одна строка текста и ваш тег div имеет фиксированную высоту, вы можете сделать это:
div {
    line-height: (2*height - font-size);
    text-align: right;
}
посмотреть скрипка.

meck373 · Accepted Answer · 2017-06-13 10:13:43

спасибо @Harry следующий код работает для меня:
.your-div{
   vertical-align: bottom;
   display: table-cell;
}

Skylin R · Accepted Answer · 2018-02-01 12:03:25

Я думаю, что лучше использовать 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>