如何根据step by div将高度设置为div

Question

当我列出产品时，我希望它们有固定的高度，根据它的逐步div的最大高度。例如，下面有一张来自亚马逊的截图，上面有我想要的东西。所有4个元素的高度都是相同的。

​

我使用下面的代码来列出产品

<div class="shop-product-wrap">
                                        <div class="row row-8">
                                            <?php foreach ($products as $product): ?>
                                                <div class="product-col col-lg-3 col-md-4 col-sm-6">
                                                    <!-- Single Product Start -->
                                                    <div class="single-product-wrap mt-10">
                                                        <div class="product-image">
                                                            <a href="<?= $product['url'] ?>"><img class="lazy"
                                                                                                  src="<?= public_url('images/other/thumbnail.jpg') ?>"
                                                                                                  data-src="<?= image_url($product['image_small']) ?>"
                                                                                                  alt=""></a>
                                                        </div>
                                                        <div class="product-button">
                                                            <a onclick="wishlist.add(<?= $product['product_id'] ?>)"
                                                               class="add-to-wishlist">
                                                                <i class="icon-heart"></i></a>

                                                        </div>
                                                        <div class="product-content">
                                                            <h6 class="product-name"><a
                                                                        href="<?= $product['url'] ?>"><?= $product['product_name'] ?></a>
                                                            </h6>
                                                            <div class="starts-icon-box">
                                                                <i class="stars-icon"></i>
                                                            </div>
                                                            <div class="price-box">
                                                                <div class="single-product-discount-and-price">
                                                                    <?php if ($product['product_discount_price']): ?>
                                                                        <span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
                                                                    <?php endif; ?>
                                                                    <div class="old-and-new-price">
                                                                        <span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
                                                                        <span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="product-button-action">
                                                                <a onclick="cart.add(<?= $product['product_id'] ?>,1)"
                                                                   class="add-to-cart">Add to cart</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- Single Product End -->
                                                </div>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>

当我列出产品的时候，它们都会根据它们的内容，比如它的名字，来取它们的高度，所以它们的高度是不一样的。我怎么才能让它们一步一步变得一样高呢？对不起，我的英语不好。

Answer 1

您必须为每个产品项目使用带有相同类名的的div标记，并添加一个父div，如下所示……

<div class="parent">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
</div>

然后对父元素和子元素使用弹性框...

.parent{
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  height: 600px; /*or something*/
}
.child{
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

有关flex box的更多信息，请访问这些链接...

https://www.w3schools.com/css/css3_flexbox.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch