Блог

Когда я перечисляю продукты, я хочу, чтобы они имели фиксированную высоту в соответствии с максимальной высотой пошагового div. Например, ниже приведен скриншот с amazon, на котором есть то, что я хочу. Высота всех 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>
 

и когда я перечисляю продукты, все они принимают высоту, которую они могут, в соответствии с их содержанием, таким как его название, и поэтому они не имеют одинаковой высоты. Как я могу сделать так, чтобы они были одинаковой высоты шаг за шагом.
Извините за мой плохой английский.

Вы должны использовать тег 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>
 

Затем используйте flex box для родительского и дочернего элемента…

 .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