使內容在相同的位置

-1

我有一個顯示產品在我的網站內盒（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>

來源

2016-09-12 charlie

您的html代碼將幫助我們幫助您！ –

表示歉意，再次看到 – charlie

你有沒有考慮嘗試'flex'？ 'display：flex;'在父'ul'和'flex：1;'上嵌套的''''通常可以做到這一點。 http://caniuse.com/#search=flex – UncaughtTypeError

我建議使用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代碼。

來源

2016-09-12 21:45:23

使內容在相同的位置

回答

相關問題