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()函数中：

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

Answer 4

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

如果您的目的是使<fieldset>的身高相同，则需要将data-equalizer-watch从<div class="small-6 columns">移至<fieldset>。这也可以让您直观地看到均衡器是否正常工作，因为<fieldset>的边界。

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

我希望有所帮助，

Answer 5

不确定这是否适用于您，但是当您使用基础的均衡器时，必须为每个元素的祖先确保以下内容，其中“data-equalizer-width”也是元素的子元素使用“数据均衡器”属性：

无国界
没有填充
无利润

这实际上不在API中，但这些属性会影响均衡器的高度计算，有时会导致它出错。

此外，必须确保在调用均衡代码时，“均衡”控件是可见的。因此，如果您在页面加载时隐藏的选项卡中使用均衡器，则需要在该部分可见时再次触发均衡器。您可以通过在窗口对象上触发resize事件来完成此操作。

Answer 6

页面加载完成后初始化Foundation对我来说很有效。我通过在加载后仅初始化均衡器来改进了该解决方案。因此，其他内容可以从“就绪”开始。

jQuery(window).on('load', function () {
   var element = jQuery('[data-equalizer]');
   var elem = new Foundation.Equalizer(element);
});

Zurb Foundation Equalizer无法正常工作

6 个答案: