html - 如何获得内容完全对齐的卡片

Question

我有这种“卡片”，当它们具有相同的内容时，效果非常好。但是如果我添加不同长度的内容，它们都会变得一团糟。解决此问题的最佳方法是什么？

我尝试过为深色部分使用固定高度，但我无法让它工作(灰色部分已经具有固定高度)因为即使现在卡片具有相同的高度，内容更多的卡片也会变得更高出于某种原因。

这是我向其中一个添加大量内容时的样子:

如果我尝试将固定高度放在较暗的部分，会发生这种情况:

这是我的没有固定高度的 HTML 和 CSS:(我不包括按钮、h4 等的 CSS)

.bDivision,
.bNet,
.bPlacements,
.bGames-Wins {
  margin: 0;
  padding: 0;
  position: relative;
  margin-top: 2em;
  margin-right: 1em;
  width: 300px;
  display: inline-block;
}
.container-boosts {
  max-width: 1300px;
}
.fBoosts .image {
  height: 400px;
  background-color: #595959;
  border-bottom: 2px solid #28F0FF;
}
.fBoosts .content {
  background-color: #1C1C1C;
  padding: 1em;
}

<div class="row container-boosts">
  <div class="bNet">
    <div class="image">
    </div>
    <div class="content">
      <h4>Net Wins Boost</h4>
      <p>Some content some content some content some content</p>
      <a class="btn-choose">Purchase</a>
    </div>
  </div>
  <div class="bDivision">
    <div class="image">
    </div>
    <div class="content">
      <h4>Division Boost</h4>
      <p>Some content some content some content some content</p>
      <a class="btn-choose">Purchase</a>
    </div>
  </div>
  <div class="bPlacements">
    <div class="image">
    </div>
    <div class="content">
      <h4>Placements Boost</h4>
      <p>Some content some content some content some content Some content some content some content some content</p>
      <a class="btn-choose">Purchase</a>
    </div>
  </div>
  <div class="bGames-Wins">
    <div class="image">
    </div>
    <div class="content">
      <h4>Normal Games Boost</h4>
      <p>Some content some content some content some content</p>
      <a class="btn-choose">Purchase</a>
    </div>
  </div>
</div>

Answer 1

更改为

.bDivision, .bNet, .bPlacements, .bGames-Wins  {
        margin: 0;
        padding: 0;
        margin-top: 2em;
        margin-right: 1em;
        width: 300px;
        display: inline-block;
        float: left;
    }

我能够使用 id="content" 在 4 个 div 的顶部对齐。