コンテンツを下に押すネストされたグリッド/フレックスボックスのタイトル

Question

サイトにチームメンバーのリストを作成しようとしています。そして、（常に）彼の仕事の説明のダウンロードを押している本当に長い職務を持っているこの男がいます。

これは他の仕事の説明とのずれを引き起こし、デザイナーはこれについて非常に朗らかです。ジョブタイトルが長い4行になった場合

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

しかし、それはまだ証明をエラーではありません。

私がこれまでに見つかった唯一の解決策は、と3つのラインにジョブ記述を制限することです。さらに、小さな画面では短いテキストが4行以上になることもあります。

私はcss gridを使用してこの可能性を研究しましたが、この問題の解決策は見つかりませんでした。これらの条件が満たされる必要があります。

• 画像、名前&タイトルと説明は同じライン
• 上に整列する必要が4つのグリッドのそれぞれが同じ高さ
• 柔軟なテキスト
• を持っている必要があります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 { 
 
\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>