嵌套網格/ Flexbox標題向下推送內容

我試圖在網站上構建團隊成員列表。而且（總是）這個人有一個非常長的職位，推動他的工作描述下載。嵌套網格/ 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>

來源

2017-10-20 James Wee

你應該張貼足夠的代碼來重現問題。這使我們能夠更有效地幫助您。 –

嗨@Michael_B，添加了供您參考的代碼。 –

@JamesWee [這篇文章]（https://stackoverflow.com/a/46890585/703717）應該幫助:) – Danield

你可以把它們放在行？所以這樣做：

.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>

來源

2017-10-20 04:21:50 andrewf

好主意，但如果我從循環中循環所有團隊成員，我不能這樣做，除非我對每個類別（頭像，位置，描述）都有多個循環，這是一種反模式。 –

嵌套網格/ Flexbox標題向下推送內容

回答

相關問題