如何对齐 div 底部的元素 (h3)？

Question

我在 div 中有两个 headers（h2 和 h3），我想将第二个 (h3) 与 div 的底部对齐，就在 bottom-border。我正在使用一些继承的代码，并且高度是响应式的，因此无法设置。这是 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 的底部对齐？

Answer 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>

如何对齐 div 底部的元素 (h3)？

How can I align an element (h3) at the bottom of a div?

css

alignment

vertical-alignment