我生成一些带有均衡标记的html元素，然后将它们附加到页面上。这使用Zurb's Foundation 6 equalization example code，稍作修改。
问题
我的html页面上有一个按钮，单击该按钮可创建代码。
元素首先看起来具有相等的元素高度，但是当将它们的大小调整为最小尺寸然后又重新调整为全屏显示时，它们不会相等。
我正在使用他们的模板系统在underscore.js中进行此操作，但我也仅通过jquery进行了测试，以达到相同的效果。
foundation.html
<!DOCTYPE html>
<html>
<head>
<title>Foundation Equalizer Fail Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css" rel="stylesheet">
</head>
<body>
<input type="button" value="Generate Equalizer">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/g/foundation@6.2.3(foundation.min.js+js/foundation.abide.js+js/foundation.core.js+js/foundation.equalizer.js+js/foundation.util.mediaQuery.js+js/foundation.accordion.js+js/foundation.accordionMenu.js+js/foundation.drilldown.js+js/foundation.dropdown.js+js/foundation.dropdownMenu.js+js/foundation.interchange.js+js/foundation.magellan.js+js/foundation.offcanvas.js+js/foundation.orbit.js+js/foundation.responsiveMenu.js+js/foundation.responsiveToggle.js+js/foundation.reveal.js+js/foundation.slider.js+js/foundation.sticky.js+js/foundation.tabs.js+js/foundation.toggler.js+js/foundation.tooltip.js+js/foundation.util.box.js+js/foundation.util.keyboard.js+js/foundation.util.motion.js+js/foundation.util.nest.js+js/foundation.util.timerAndImageLoader.js+js/foundation.util.touch.js+js/foundation.util.triggers.js)"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/template" id="t_underscore">
<div class="row" data-equalizer data-equalize-on="medium">
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/square-1.jpg">
</div>
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="medium-4 columns">
<div class="callout" data-equalizer-watch>
<img src= "http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
</script>
<script type="text/javascript">
$(document).foundation();
var template = _.template($("#t_underscore").html());
var t = $(template());
$("input[type=button]").on("click", function() {
$("body").append(t).foundation();
});
</script>
</body>
</html>
它使用所有的CDN和远程映像，因此应在所有浏览器上正确显示。
我注意到一些与正常运行的基础均衡设置不同的东西：
我的均等div上没有
data-events="resize"标记它在元素上设置
height: auto;而不是其像素大小。 最佳答案
我向Zurb Foundation提出了问题，并收到了解决方案。
尽管文档中没有明确声明：在将基础元素追加到页面时，它们不能包含基础标签
包含基础标签的行：
<div class="row" data-equalizer data-equalize-on="medium">
成为：
<div class="row">
我的脚本变成了：
<script type="text/javascript">
$(document).foundation();
var template = _.template($("#t_underscore").html());
$("input[type=button]").on("click", function() {
$("body").append(template);
var equalizer = new Foundation.Equalizer($(template), {"data-equalize-on": "medium"});
});
</script>