Question

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

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

这是小提琴：

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

Answer 2

flex让它变得简单：https://jsfiddle.net/b88mp0a4/1/

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

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

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

表格单元格也可以使用，我认为它不太相关：

div {
  display: table-cell;
  width: 100vw;
}
label {
  margin: auto 0 0;
}

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

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

2 个答案: