Question

我有一个页面，显示我的网站内的产品（https://s21.postimg.io/9nw7kqrfb/Screen_Shot_2016_09_12_at_22_27_46.png）

但如果图片太小，框内的数据不会显示在每个框的相同位置。

如果我将每个盒子设置为一个设定的高度，我如何让产品标题和价格显示在盒子底部的彼此之下，这样两者都完全一样？

一个方框的HTML：

<li class="post-2483 product type-product status-publish has-post-thumbnail product_brand-mikrotik product_cat-routers  instock featured taxable shipping-taxable purchasable product-type-simple">
    <a href="#" class="woocommerce-LoopProduct-link"><span class="et_shop_image"><img width="300" height="180" src="#" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="mikrotik-rb2011" title="mikrotik-rb2011"><span class="et_overlay"></span></span><h3>Mikrotik RB2011 Advanced Wi-Fi Router</h3>
    <span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>109.00</span> <small class="woocommerce-price-suffix">ex VAT</small></span>
</a></li>

Answer 1

我建议使用jquery来平衡 et_shop_image 类名称的跨度高度。

$(document).ready(function(){
  var maxHeight=0;
  $(".et_shop_image").each(function(){
  if ($(this).height()>maxHeight){maxHeight=$(this).height()}
  });

  $(".et_shop_image").height(maxHeight);
})

同时确保班级et_shop_image有display:inline-block或block

如果您不能使用javaScript并且使用的是HTML 5，请检查flexbox。但是你也需要修改HTML代码。

使div内的内容显示在相同的位置

1 个答案: