无论标题高度如何，都以相同的高度开始段落

Question

我已经研究和尝试了很多年，这让我发疯了，我无法解决这个看似简单的问题。

我一直在尝试使用 flexbox 将 blogpost-previews 中的标题调整到相同的高度。如果标题“太长”，它会出现换行符并且比较短的标题具有更大的高度，这没关系。但是，标题下方的段落不再以相同的高度开始，这看起来很奇怪。有没有一种简单的方法来实现这一点，最好是使用 flexbox？

这是我想要实现的目标的图像：

这是code on codepen的链接

<div class="blogpost-container">

  <div class="blogpost">

    <header class="blogpost__header">
      <div class="dummy-image"></div>
      <a href="#"><h1>Blogpost heading short</h1></a>
    </header>

    <div class="blogpost__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria. 
      Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
    </div>

  </div>

  <div class="blogpost">

    <header class="blogpost__header">
      <div class="dummy-image"></div>
      <a href="#"><h1>Blogpost Heading is longer and thus has a greater height than the short one</h1></a>
    </header>

    <div class="blogpost__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Graecum enim hunc versum nostis omnes: Suavis laborum est praeteritorum memoria. 
      Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium.</p>
    </div>

  </div>

</div>

非常感谢您的帮助。

Answer 1

获取小提琴：https://jsfiddle.net/4sew4x2m/

我使用了<table>。但你可以改用display:table。

从我的角度来看，如果你弯曲，你必须为那个 div 提供宽度。在使用表格的情况下，您不必这样做 - 这就是优势。

祝你好运！