HTML – Zurb Foundation Equalizer无法正常工作

我正试图在“显示”视图中显示一个表单,并且我想使用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>

解决方法

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

如果您的目的是使< fieldset>的高度相同,则需要将数据均衡器监视从< div class =“small-6 columns”> s移动到< fieldset> s .这也可以让你直观地看到Equalizer是否正常工作,因为< fieldset>的边框.

我用两个例子创建了这个codepen,http://cdpn.io/igDoI.一个是上面的代码,我在你的< div class =“small-6 columns”>中添加了一个虚线边框.另一个例子是上面的代码,我将数据均衡器监视移动到< fieldset>.

我希望有帮助,