将行垂直对齐到 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

您的三个 div 需要有 float:left;、height 和 33.3%，并且没有边距。

Answer 2

您可以将 display:table 用于 .smalnews 并 display:table-row 像这样宽度其行：

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

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

将行垂直对齐到 100% 高度

Vertically align rows to 100% height

css

jquery

zurb-foundation