具有不同字体大小的相邻元素的高度相同

Question

我有两个带有文字的元素，所有文字应在底部对齐。

我有条件地使用Javascript隐藏/显示元素，这会导致元素的字体大小不同而导致跳转。

当字体大小不同并且同时将文本底部对齐时，是否可以使相邻的元素占据相同的高度？

Activity

.alpha {
  background-color: green;
  font-size: 15px;
}

.beta {
  background-color: pink;
  font-size: 30px;
}

Answer 1

我通过为父元素赋予与最高孩子相同的高度来解决它。

div {
  font-size: 30px;
}

.alpha {
  background-color: green;
  font-size: 15px;
}

.beta {
  background-color: pink;
  font-size: 30px;
}

<div>
  <span class="alpha">Alpha</span>
  <span class="beta">......</span>
</div>

Answer 2

您将看到line box的结果，您应该花点时间在盒子模型中进行研究。将vertical-align:bottom;添加到一个跨度中以使行框对齐。