Question

我有两个不同大小的文本div，我想要对齐底部。

他们成功地与父母的底部对齐，但他们没有彼此均匀对齐。

这可以解决吗？

.container {
  display: flex;
  height: 50px;
  background: pink;
}

.large, .small {
  align-self: flex-end;
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

<div class="container">
  <div class="large">Large</div>
  <div class="small">Small</div>
</div>

Answer 1

一种方法是将两个文本DIV放入另一个包装器（下面我的代码段中的.inner_container），它获取以前文本的设置以便与底部对齐，并应用display: inline-block;文本DIV：默认情况下，内联块通过其基线彼此对齐，如果我理解正确，这就是你想要的：

＆＃13;

.container {
  display: flex;
  height: 50px;
  background: pink;
}

.inner_container {
  align-self: flex-end;
}

.large,
.small {
  display: inline-block;
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

＆＃13;

<div class="container">
  <div class="inner_container">
    <div class="large">Large</div>
    <div class="small">Small</div>
  </div>
</div>

＆＃13;

Answer 2

根据@Johannes answer，最好将两个文本div包装在另一个容器中。但是您不需要align-self: flex-end;的{{1}}声明，只需将.inner-container添加到父align-items: flex-end;。这样，您就少了一条CSS规则。

div与display: inline;一样，使项目按其基线对齐（基于具有最大高度的项目，在这种情况下为display: inline-block文本），因此您可以更改{ {1}}和.large跨越而不是div。由于<div class="large">的默认显示属性是内联的，因此您可以跳过<div class="small">和<span>的显示声明：

.large

.small

将不同大小的文本对齐到底部

2 个答案: