html - 将整个标签元素对齐到其父 div 的底部

Question

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

其中，是一个标签元素。当只有一行文本时，我希望它在底部对齐，但似乎无法实现。

这是 fiddle :

https://jsfiddle.net/robarwebservices/b88mp0a4/

<div style="height:45px;vertical-align:bottom; border:1px solid orange"><label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:</label></div>

<br /><br />

<div style="height:45px;vertical-align:bottom; border:1px solid orange"><label style="display:block;width:100%; border:1px solid blue;" for="sSignUpUserName" id="sNewUserNameResult" class="">User Name:<br />alksjdhf</label></div>

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

Answer 1

您可以给父 div 相对定位，然后给标签绝对定位，底部为零:

.cf {
  position: relative
}

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

jsFiddle example