垂直对齐 - Foundation 5 - 简单的 Javascript答案

【问题标题】：Vertical Alignment - Foundation 5 - Simple Javascript垂直对齐 - Foundation 5 - 简单的 Javascript
【发布时间】：2014-01-23 04:35:57
【问题描述】：

我已经使用here (js.fiddle link) 解释的技术来实现页面上某个部分的垂直对齐。

我的问题是我想在页面的不同部分重复使用相同的技术。

目前这可行，但显然第一个实例的高度随后被应用于其他地方完全不相关的部分，并且没有实现垂直对齐。有人可以帮我修改 js（也许使用“this”吗？）以允许使用相同的代码将高度应用于页面不同部分的不同元素？

或者每次我想使用它时，我是否必须用不同的变量/类名复制这段代码？

下面的代码sn-ps

HTML

<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="spade.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content</p>
  </div>
</div>
<div class="row row_v_align">
  <div class="small-3 columns column_v_align">
    <div class="v_align"><img src="bullsEye.png"></div>
  </div>
  <div class="small-9 columns">
    <h3>Title</h3><p>Content.</p>
  </div>
</div>

CSS

.row_v_align {
  display: table;
}
.v_align {
  display: table-cell;
  vertical-align: middle;
}

$(window).on("resize", function () {
  var rowHeight = $(".row_v_align").height();
  console.log(rowHeight);
  $(".column_v_align").height(rowHeight);
  $(".v_align").height(rowHeight);
}).resize();

【问题讨论】：

标签： javascript jquery css zurb-foundation vertical-alignment

【解决方案1】：

我用你链接的小提琴测试了下面的代码。

$(document).ready(function(){
    $(".row").each(function(){
        var rowHeight = $(this).height();
        console.log(rowHeight);
        $(".column", this).height(rowHeight);
        $(".v_align", this).height(rowHeight);
    });
});

所以对你来说这应该有效：

$(window).on("resize", function () {
  $(".row_v_align").each(function(){
    var rowHeight = $(this).height();
    console.log(rowHeight);
    $(".column_v_align", this).height(rowHeight);
    $(".v_align", this).height(rowHeight);
  });
}).resize();

每个匹配元素的each() 运行函数
$("...", this) 确保在当前行内进行更改

【讨论】：

谢谢佐拉。这正是我所追求的。