0
我试图在网站上构建团队成员列表。而且(总是)这个人有一个非常长的职位,推动他的工作描述下载。嵌套网格/ Flexbox标题向下推送内容
这造成了与其他工作描述不一致,设计师对此非常不情愿。
我迄今发现的唯一的解决办法是在职位描述限制在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>
你应该张贴足够的代码来重现问题。这使我们能够更有效地帮助您。 –
嗨@Michael_B,添加了供您参考的代码。 –
@JamesWee [这篇文章](https://stackoverflow.com/a/46890585/703717)应该帮助:) – Danield