Html 将整个标签元素在其底部对齐'；s父分区

我有一个div，它是一个固定高度的div，足够容纳两行文本

其中，是一个标签元素。当只有一行文字时，我希望它在底部对齐，但似乎无法做到这一点

这是小提琴：

用户名：



用户名：
alksjdhf

---

两个相同的框，一个有一行，一个有两行文本。我希望第一个框将单行文本与底部对齐，而不改变两行的外观，例如，我不想简单地填充顶部，等等

您可以为父div提供相对定位，然后为标签提供底部为零的绝对定位：

.cf {
  position: relative
}

.cf > label {
  position: absolute;
  bottom: 0
}

---

您可以为父div提供相对定位，然后为标签提供底部为零的绝对定位：

.cf {
  position: relative
}

.cf > label {
  position: absolute;
  bottom: 0
}

flex简化了操作：

div{
显示器：flex；
}
标签{
保证金：自动0；
}

用户名：




用户名：

alksjdhf

flex让它变得简单：

div{
显示器：flex；
}
标签{
保证金：自动0；
}

用户名：




用户名：

alksjdhf

喜欢这个解决方案，但不确定它在IE11下是否受支持？@robarwebservices在IE11下，你可以看看display:table cell where vertical align is available喜欢这个解决方案，但不确定它在IE11下是否受支持？@robarwebservices在IE11下，你可以看看display:table cell where vertical align is available

div {
  display:flex;
}
label {
  margin :auto 0 0;
}