Zurb Foundation Equalizer无法正常工作

Question

我正试图在"显示"视图中显示一个表单,并且我想使用Foundation的均衡器来使div具有相同的高度但是由于某种原因它不适用于一个div高于另一个div.

我的猜测是它与在容器中使用php有关,但我没有在他们的文档页面上找到与此相关的任何内容.

如果有人能够指出我哪里出错或者他们确实知道这不会与基金会合作我会很感激您的意见!谢谢!

HTML:

<div class="row" data-equalizer>
    <div class="small-6 columns" data-equalizer-watch>          
       <fieldset><legend>Order Information</legend>
          <?php
            echo "Number of Guests: ". $order_array['guestNumber' . $x].'<br>';
            echo "Food: ". $order_array['food' . $x].'<br>';
         ?>     
       </fieldset>  
    </div>
<div class="small-6 columns k" data-equalizer-watch>
    <fieldset><legend>Location</legend>
    <?php
         echo "Order Name: " .  $order_array['orderName'] . '<br>';
     ?>
    </fieldset> 
</div>

</div>

Answer 1

我的解决方案(在使用我推荐的另一个插件找到更有效的解决方案之前)就是将基础init包装起来:

$(window).on('load', function () {
  $(document).foundation();
});

Answer 2

如果项目正在堆叠(如果offset().top所有项目的值不相等)并且您已设置,则均衡器将不起作用equalize_on_stack: false.尝试将此配置添加到主js文件中:

$(document).ready(function() {
  $(document).foundation({
    equalizer : {
      // Specify if Equalizer should make elements equal height once they become stacked.
      equalize_on_stack: true
    }
  });
});

Answer 3

我的问题是我在页面加载完成之前初始化了基础js.确保在jQuery ready()函数中包装Foundation初始化程序:

$(function() {
  $(document).foundation();
});

Answer 4

我的第一个想法是均衡器正在工作并且它使两个<div class="small-6 columns">高度相同。除非您有一些视觉线索来区分它们，例如不同的背景颜色或边框设置，否则可能很难判断均衡器是否正常工作。请注意，我以前也犯过这个错误。

如果您的目的是使<fieldset>s 具有相同的高度，则需要将 sdata-equalizer-watch从<div class="small-6 columns">s移至<fieldset>s。<fieldset>由于的边框，这还可以让您直观地看到均衡器是否正在工作。

我创建了这个 codepen，http://cdpn.io/igDoI，其中包含两个示例。一个是上面的代码，我在你的两个代码中添加了虚线边框<div class="small-6 columns">。另一个例子是上面的代码，我将 移至data-equalizer-watchs <fieldset>。

我希望这有帮助，