我正在为我的列使用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>
我已经包含了现在看起来像的图像:
如果有人能给我一些帮助,我会很感激。提前谢谢。
答案 0 :(得分:0)
所以,我现在找到了解决问题的方法,所以我会回答我自己的问题。基本上我有一堆箱子都需要高度相同。在每个盒子的底部是价格,型号#和按钮。在上面这个文本当然有可变的高度,所以从价格下来有可变高度框到框。
我正在使用jQuery插件来获得相同的盒子而不是将它应用到整个盒子,我将它应用到一个div,它只处理盒子的顶部,包括文本并停在价格上。这解决了这个问题。
也许这可以帮助其他人解决同样的问题。谢谢你的建议。