<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
html - 当标题变大或变小时对齐 woocommerce 价格
我需要调整产品的价格并使它们(如果可能)与按钮相关，而不是与它们上方的标题相关。如果可能的话，我也想避免使用最小高度。有什么建议吗？
最佳答案
.product-container {
text-align: center;
float: left;
width: 250px;
height: 470px;
padding: 5px;
border: thin solid #999;
position: relative;
margin-left: 10px;
}
.product-description {
width: 100%;
text-transform: uppercase;
font-size: .8em;
padding: 10px 0px;
}
.product-price {
position: absolute;
bottom: 50px;
padding-top: 15px;
text-align: center;
width: 100%;
font-size: 1.2em;
font-weight: bold;
}
.add-to-cart {
position: absolute;
bottom: 5px;
text-align: center;
width: 100%;
padding-top: 15px;
}
button {
width: 100px;
height: 30px;
background-color: orange;
color: white;
border: none;
border-radius: 5%;
}<div class="product-container">
<div class="product-image"><img src="http://placehold.it/250x350"></div>
<div class="product-description">American crew powder cleanser style remover shampoo 250ml</div>
<div class="product-price">€19.95</div>
<div class="add-to-cart">
<button>Add to cart</button>
</div>
</div>
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/250x350"></div>
<div class="product-description">American crew pomade 85ml</div>
<div class="product-price">€12.15</div>
<div class="add-to-cart">
<button>Add to cart</button>
</div>
</div>我已经创建了一个示例。我看不到您的代码，所以我不得不做出一些假设。如果这对你有用，请告诉我。 fiddle :https://jsfiddle.net/beekvang/q30odku9/1/
关于html - 当标题变大或变小时对齐 woocommerce 价格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44002122/