0

我正在为我的列使用 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>

我已经包含了它现在的样子的图像：

在此处输入图像描述

如果有人可以给我一些帮助，我将不胜感激。提前致谢。

4

1 回答 1

0

所以，我现在找到了解决问题的方法，所以我会回答我自己的问题。基本上我有一堆盒子，它们都需要相同的高度。每个盒子的底部都有价格、型号和按钮。上面是文本，当然有可变的高度，所以从价格开始，盒子到盒子的高度是可变的。

我为相等的盒子使用了一个 jQuery 插件，所以我没有将它应用到整个盒子，而是将它应用到一个 div，该 div 只处理盒子的顶部，包括文本并停在价格上。这解决了问题。

也许这可以帮助其他人解决同样的问题。感谢您的建议。

于 2012-06-04T19:57:01.987 回答