將行垂直對齊到100％高度

Question

我正在爲網站創建新聞模塊，並且我想用最大的照片和旁邊的3篇文章顯示最新的文章。我使用的基礎5.

你可以在這裏看到我目前的進度：

<div class="large-5 columns" data-equalizer-watch> 
    <div class="smallnews"> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div class="row"> 
      <div class="small-4 columns"><img src="i/andromeda-orbit.jpg" alt /></div> 
      <div class="small-8 columns">Lorem ipsum dolor sit amet.</div> 
     </div> 
    </div> 
</div> 

我的div是完全一樣的高度，更大的圖像。我正在使用基金會的均衡器來做到這一點。所以基本上我想要一個jQuery插件或CSS技巧，使這3行對齊到父高度的100％。我不知道他們會有多少文字。

Answer 1

可以使用display:table爲.smalnews和display:table-row寬度一樣，其行：

.smallnews{ 
    display:table; 
    height:100%; 
} 
.smallnews .row{ 
    display:table-row; 
} 

演示：https://jsfiddle.net/IA7medd/drv7svym/

Answer 2

您的三個div需要有float:left;,height的33.3%且沒有餘量。