无论标题高度如何，都要在相同高度上启动段落

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提供宽度。如果使用表格，您没有 - 这是优势。

祝你好运！