html - 柔性 : Align multiple items as a table

Question

试图更好地对齐一行的某些小节。我已经设法在同一行上获得“阅读更多”按钮，使用 flex: 1;。但是，我似乎无法很好地对齐图像的顶部和第一段的开头。

布局是一系列 div，里面有文章:

<div class="row-X">
  <article>
    <header></header>
    <main></main>
    <footer></footer>
  </article>
</div>

这是我正在寻找的结果:http://imgur.com/XqvijDX

这就是我得到的:http://codepen.io/anon/pen/PqveNq

Answer 1

codepen demo

header{
  min-height:140px;
}

在这种情况下，给标题一个最小高度。