如何获得完整的内容卡片

Question

我有这种“卡片”，当它们具有相同的内容时，它们可以很好地工作。但如果我添加不同长度的内容，它们都会搞砸。解决这个问题的最佳方法是什么？

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

如果我向其中一个添加大量内容，这就是它的样子：

如果我尝试将固定高度放在较暗的部分，会发生什么：

这是我没有固定高度的HTML和CSS： （我不包括按钮的CSS，h4等）

.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 =＆＃34; content＆＃34; 在4个div上对齐。

Answer 2

是的，那就是你需要的...... 一个float : left ; 在你的4个主要divs seletor。