我有两个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>

最佳答案

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

display: inline;display: inline-block一样,使项目按其基线对齐(基于最大高度的项目,在本例中为.large文本),因此可以将<div class="large"><div class="small">更改为span而不是div。由于<span>的默认显示属性是内联的,因此您可以跳过.large.small的显示声明:



.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end;
}

.large, .small {
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}

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

关于css - 将不同大小的文本对齐到底部,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50515042/

10-12 00:18
查看更多