行を100％の高さに垂直に整列する

Question

私はウェブサイト用のニュースモジュールを作成しています。大きな写真とその隣に3つの記事がある最新の記事を表示したいと思います。私のdivは、大きな画像とまったく同じ高さである

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

：私はあなたがここに私の現在の進行状況を見ることができ財団5.

を使用しています。私はFoundationのイコライザを使ってそれを行っています。ですから、基本的には、これらの3行を親の高さの100％に揃えるためにjQueryプラグインまたはCSSトリックが必要です。私はどれくらいテキストがそこにあるのか分かりません。

Answer 1

あなたは.smalnewsためdisplay:tableを使用することができますし、display:table-rowはそのようにその行幅：

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

デモ：https://jsfiddle.net/IA7medd/drv7svym/

Answer 2

あなたの3つのdivはfloat:left;、heightは33.3%、余白は必要ありません。