我正在为我的列使用 jQuery 等高插件,但设计师希望从价格下降到添加到购物车按钮也均衡。这可能与jQuery有关吗?我已经尝试将它添加到现有的相等高度,但实际上我不确定我在做什么。
这是jQuery:
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow","hidden");
});
}
})(jQuery);
这是其中一个盒子的布局方式:
<ul id="phones" class="clearfix">
<li class="phone">
<div class="top"></div>
<img src="/_img/2012/accessories_product.jpg" alt="phone" width="192" height="120"/>
<h2>BLACKBERRY MICRO-USB VEHICLE POWER ADAPTER</h2>
<p>Product description sed ut perspici atis unde omnis iste natus sit volupt.</p>
<div class="btm">
<h3 class="price">$29.99</h3>
<p class="modelnumb">MODEL #: 1234567890</p>
<a href="#" class="btn btn_addtocart">Add To Cart</a>
</div>
</li>
我在这样的页面上调用它:
<script>
$j(document).ready(function() {
$j("#phones > li.phone").equalHeights(412);
});
</script>
我已经包含了它现在的样子的图像:
如果有人可以给我一些帮助,我将不胜感激。提前致谢。