嵌套网格/弹性框标题向下推动内容[重复]

Question

我正在尝试在网站上构建团队成员列表。并且（总是）这个人的职位很长，正在推动他的职位描述下载。

这导致与其他职位描述不一致，设计师对此非常有强迫症。

到目前为止，我发现的唯一解决方案是将职位描述限制为 3 行：

font-size: 10px;
height: 30px;
line-height: 1;

但是，如果职位名称变成 4 行长，它仍然不能防错。此外，较小的屏幕甚至可能将短文本换行，使其长度超过 4 行。

我研究了使用 CSS 网格的可能性，但没有找到解决这个问题的方法。需要满足这些条件：

• 图片、名称&标题和描述需要在同一行对齐
• 四个网格中的每一个都需要具有相同的高度
• 灵活的文本
• 如果我们可以在不使用 jQuery 的 MatchHeight 的情况下解决这个问题，那就太好了。

<div class="row small-up-1 medium-up-2 large-up-3">
  <% loop $Collection %>
    <div class="column person">
      <div class="row column">
        <div class="person__photo">
          <img src="$Image.Url" class="person__photo--round" alt="$Name">
        </div>
      </div>
      <div class="row column text-center">
        <h4 class="person__name">$Name</h4>
        <h5 class="person__role">$Role</h5>
      </div>
      <% if $Blurb %>
        <div class="row column person__summary content">$Blurb</div>
      <% end_if %>
    </div>
  <% end_loop %>
</div>

Answer 1

你能把它们排成一行吗？因此，请执行以下操作：

.headshot, .positionTitle, .description {
	width: 100px;
	min-height: 20px;
	border: solid 1px black;
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

<div class="row"> <!-- Image row -->
	<div class="headshot"></div>
	<div class="headshot"></div>
	<div class="headshot"></div>
	<div class="headshot"></div>
</div>

<div class="row"> <!-- Title row -->
	<div class="positionTitle">Short</div>
	<div class="positionTitle">Short</div>
	<div class="positionTitle">Really really<br><br><br>long</div>
	<div class="positionTitle">Short</div>
</div>

<div class="row"> <!-- Description row -->
	<div class="description"></div>
	<div class="description"></div>
	<div class="description"></div>
	<div class="description"></div>
</div>