使列始终等于高度？ （基础5）

Question

如何创建图像中显示的布局？使用Foundation 5，第一列左侧和第二列右侧应始终具有相同的高度，，具体取决于第一列高度。

Answer 1

基础均衡器将使它们均匀，但基于较长的一个。 http://foundation.zurb.com/docs/components/equalizer.html

你可以使用jQuery自己这样做（这可以用于许多列，并且任何列都可以确定大小：

$(document).ready(function() {
  sizeRow();

  function sizeRow() {
    var $col = $('.sizeRow .size-by-me');
    var height = $col.height();
    $col.siblings('.size-me').height(height);
  }
});

.small-6 {
  float: left;
  width: 50%;
}
.col1 {
  height: 400px;
  background-color: #F00;
}
.col2 {
  height: 200px;
  background-color: #FF0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
  <div class="small-6 columns size-by-me col1">Column 1</div>
  <div class="small-6 columns col2 size-me">Column 2</div>
</div>