html - 如何为所有相同的填充制作价格 block

Question

面对这个问题，我的价格 block 到处都有不同的缩进。这是由于文本(产品名称)的长度。如何为所有相同的标记制作一组价格。我该怎么做？请帮帮我。至少是一个小例子。

html

<div class="product_grid">
    <div class="product_section">
        <div>
            <a href="#">
                <div>
                    <img class="product_image" src="#">

                    <div class="product_text">
                        <div class="product_name">Name</div>
                        <div class="product_price_block">
                            <div class="product_price empty">1200 &#8381;</div>
                            <div class="product_price">1800 &#8381;</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div>
            <button class="add_to_cart">Add to cart</button>
        </div>
    </div>
</div>

CSS

.product_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    grid-row-gap: 20px;
    grid-column-gap: 3%;
    padding: 8px;
}

.product_grid > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
}

.product_price_block {
    display: flex;
    justify-content: space-around;
    border: 1px solid grey;
    padding: 10px 12px;
    margin-top: 3rem;

}

.add_to_cart {
    border: 1px solid grey;
    padding: 10px 12px;
    margin-top: 3rem;
    cursor: pointer;
    background: none;
    outline: none;
}

.product_image {
    vertical-align: middle;
    max-width: 100%;
}

谢谢!

Answer 1

您可以固定产品名称的 div 高度。 试试这个:-

.product_name{
   height: 30px;
}