html - 如何在容器div中底部垂直对齐具有不同字体大小的两个div

Question

我需要将发票文本左对齐，将发票编号右对齐。我希望它们都底部对齐，否则下面的下划线看起来很奇怪。我有以下 html:

<div style="height:75px; line-height:75px;">
    <div class="invoiceTitle">Invoice</div>
    <div class="invoiceNumber"># 12</div>
</div>

使用以下 CSS:

.invoiceTitle
{
    float: left;
    font-size: 36px;
    vertical-align: bottom;
}

.invoiceNumber
{
    float: right;
    font-size: 16px;
    vertical-align: bottom;
}

我不知道如何让它们垂直对齐在一起。那里有额外的代码来显示我尝试失败的事情。

Answer 1

vertical-align: bottom; 仅适用于内联 block ，每当您使用 float 时，它都会移动到其他 Block formatting context .您可以使用 flexbox & align-items: flex-end;

来实现

.container {
  height: 75px;
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  align-items: flex-end;
}

.invoiceTitle {
  flex: 1;
  font-size: 36px;
}

.invoiceNumber {
  font-size: 16px;
  flex: 1;
  text-align: right;
}

<div class="container">
  <div class="invoiceTitle">Invoice</div>
  <div class="invoiceNumber"># 12</div>
</div>