如何在woocommerce中定制价格标签宽度固定列产品列表

Question

我一直在尝试将这种风格设计几个小时，但没有运气。

我已经在woocommerce的产品列表中设置了固定的列高度，我想将价格（销售和常规）定型到它的底部，一个在左边，另一个在右边。

我用下面的代码：

a .price { 
position:absolute; 
bottom:0; 
width:100%; } 
ins.amount { 
position:relative; 
float:right; 
clear:both; } 
del.amount { 
position:relative; 
clear:both; } 

，但他们的风格一个挨着另一个，而不是在角落，因为我希望他们。 我也尝试设置利润率，但他们不会很好，因为不是每个价格都有相同数量的字符。 网址：http://men.trikaliotis.info 任何帮助将非常感激

Answer 1

下面你需要应用CSS。我还创建了一个fiddle。

.woocommerce ul.products li.product .price { 
 
    display: inline-block; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.woocommerce ul.products li.product .price del { 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.woocommerce ul.products li.product .price ins { 
 
    display:inline-block; 
 
    float: right; 
 
}

Answer 2

也许这是值得一试：

ins .amount { 
position: absolute !important; 
left: 0px; 
bottom: 0; 
} 


del .amount { 
position: absolute !important; 
right: -120px!important; 
bottom: 0; 

}