如何使用CSS实现水平排列inline-block卡片顶部边框对齐

将下方代码片段以全页面宽度打开时，为何每个卡片的顶部边框位置不对齐？我已经为每个.card元素设置了固定宽高，原本预期它们可以正常对齐。

备注：我也曾尝试使用display: table-cell实现对齐，但该方案会丢失流式布局特性，卡片无法自适应浏览器宽度。我希望保留卡片随浏览器宽度自动适配、每行自动排列合适数量卡片的特性，且页面不出现水平滚动条。

复现代码 #

CSS 部分 #

#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

HTML 部分 #

<div id="main">
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla blablabla</p>
    </div>
  </div>
</div>
<div class="cell">        
  <div class="card">
    <img src="">
    <div class="container">
      <h4><b>Abc</b></h4>
      <p>blablabla</p>
    </div>
  </div>
</div>
</div>

错位原因 #

inline-block 元素默认的垂直对齐规则是vertical-align: baseline（基线对齐）。示例中不同卡片内部的文本长度不一致，元素基线位置存在差异，就会导致同一行的卡片顶部高低错位，和卡片设置固定宽高没有关联。

修复方案 #

只需要给.cell元素增加vertical-align: top属性即可，不需要改动其他结构和样式：

.cell { 
  display: inline-block; 
  vertical-align: top;
}

该方案完全保留原有流式布局特性：卡片会随浏览器宽度变化自动换行，每行自动排布适配数量的卡片，页面不会出现水平滚动条。

内容的提问来源于stack exchange，提问作者Basj