如何在 div 的底部对齐元素（h3）？答案

【问题标题】：How can I align an element (h3) at the bottom of a div?如何在 div 的底部对齐元素（h3）？
【发布时间】：2021-10-14 06:19:51
【问题描述】：

我在一个 div 中有两个标题（h2 和 h3），我想将第二个（h3）与底部边框正上方的 div 底部对齐。我正在使用一些继承的代码，并且高度是响应式的，因此无法设置。这是codepen。这是 HTML：

 <div id="toc-texts">
  <div class="toc-entry">
    <h2>Title 1 That is Actually Really Long</h2>
    <h3 class="author">Author Name 1</h3>    
  </div>
   <div class="toc-entry">
    <h2>Title 2</h2>
    <h3 class="author">Author Name 2</h3>    
  </div>
   <div class="toc-entry">
    <h2>Title 3</h2>
    <h3 class="author">Author Name 3</h3>    
  </div>
 </div>

这是我目前拥有的 css：

div#toc-texts {
    display: inline;
  } 

div.toc-entry {
  text-align: center;
  border-bottom: 2px solid blue;
}

@media (min-width: 30em) {
  div#toc-texts {
    margin-bottom: 4rem;
    display: inline-grid;
    grid-template-columns: 9rem 9rem 9rem;
    grid-gap: 4em;
  }
  
}

如何以适用于所有浏览器和移动设备的方式将 h3 对齐到 div 的底部？

【问题讨论】：

Flexbox 会派上用场

标签： css alignment vertical-alignment

【解决方案1】：

使用 flexbox 列。

用margin-top:auto将h3推到底部，然后右对齐。

div#toc-texts {
  display: inline;
}

div.toc-entry {
  text-align: center;
  border-bottom: 2px solid blue;
  display: flex;
  flex-direction: column;
}

h3.author {
  font-size: .9em;
  font-style: italic;
  margin-top: auto;
  text-align: right;
}

@media (min-width: 30em) {
  div#toc-texts {
    margin-bottom: 4rem;
    display: inline-grid;
    grid-template-columns: 9rem 9rem 9rem;
    grid-gap: 4em;
  }
}

<div id="toc-texts">
  <div class="toc-entry">
    <h2>Title 1 That is Actually Really Long</h2>
    <h3 class="author">Author Name 1</h3>
  </div>
  <div class="toc-entry">
    <h2>Title 2</h2>
    <h3 class="author">Author Name 2</h3>
  </div>
  <div class="toc-entry">
    <h2>Title 3</h2>
    <h3 class="author">Author Name 3</h3>
  </div>
</div>

【讨论】：