使用jquery等高,但在列内也需要相同的元素

时间:2012-06-04 14:30:34

标签: jquery html

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

我已经包含了现在看起来像的图像:

enter image description here

如果有人能给我一些帮助,我会很感激。提前谢谢。

1 个答案:

答案 0 :(得分:0)

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

我正在使用jQuery插件来获得相同的盒子而不是将它应用到整个盒子,我将它应用到一个div,它只处理盒子的顶部,包括文本并停在价格上。这解决了这个问题。

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