2017-10-20 185 views
0

我试图在网站上构建团队成员列表。而且(总是)这个人有一个非常长的职位,推动他的工作描述下载。嵌套网格/ Flexbox标题向下推送内容

这造成了与其他工作描述不一致,设计师对此非常不情愿。

我迄今发现的唯一的解决办法是在职位描述限制在3线,:

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

但是,现在还没有,如果职位变为4线长的错误证明。此外,较小的屏幕甚至可能会将短文本换成长度超过4行。

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

  • 图片,名称&标题和说明必须在同一行
  • 每四个格子都需要具有相同的高度
  • 灵活的文本
  • 对齐如果我们可以在不使用jQuery的MatchHeight的情况下解决这个问题,那将会很棒。

enter image description here

<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> 
+1

你应该张贴足够的代码来重现问题。这使我们能够更有效地帮助您。 –

+0

嗨@Michael_B,添加了供您参考的代码。 –

+0

@JamesWee [这篇文章](https://stackoverflow.com/a/46890585/703717)应该帮助:) – Danield

回答

0

你可以把它们放在行?所以这样做:

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

 
.row { 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: space-evenly; 
 
}
<div class="row"> <!-- Image row --> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
\t <div class="headshot"></div> 
 
</div> 
 

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

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

+0

好主意,但如果我从循环中循环所有团队成员,我不能这样做,除非我对每个类别(头像,位置,描述)都有多个循环,这是一种反模式。 –