Выровнять текст в нижней части div

Я попытался выровнять свой текст в нижней части div от других сообщений и ответов в stackoverflow, которые я научился обрабатывать с помощью разных свойств css. Но я не могу это сделать. В основном мой код html выглядит следующим образом:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
   <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

Эффект заключается в том, что в FF я просто получаю вертикальную линию (div в сложенном виде), и текст записывается рядом с ней. Как я могу предотвратить свертывание div, но имеющую ширину, соответствующую тексту?

Ответ 1

Решение Flex

Это прекрасно, если вы хотите пойти с решением display: table-cell. Но вместо того, чтобы взломать его, у нас есть лучший способ выполнить то же самое с помощью display: flex;. flex - это то, что имеет достойную поддержку.

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}

<div class="wrap">
  <span>Align me to the bottom</span>
</div>

Ответ 2

Теперь вы можете сделать это с помощью Flexbox justify-content: flex-end:

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}

<div>
  Something to align
</div>