将行垂直对齐到100％高度

Question

我正在为一个网站创建一个新闻模块，我想展示最新的文章，旁边有一张大照片和3篇文章。我正在使用Foundation 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与较大图像的高度完全相同。我正在使用Foundation的均衡器来做到这一点。所以基本上我想要一个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需要magicNumber，float:left; height且无边距。