проблема выравнивания высоты при отображении продуктов

Question

Я занимаюсь проектом электронной коммерции.Во время отображения списка продуктов, если я вставлю какой-либо контент внутрь, высота будет меняться, и общее выравнивание нарушается.

Вы можете увидеть код ниже.Я использую bootstrap 4.

#product_list {
  width: 210px;
  margin-right: 0px;
  font-size: 14px;
}

.product-item {
  width: 100%;
  height: 350px;
  cursor: pointer;
  background-color: #FFFFFF;
}

.product {
  width: 100%;
  height: 350px;
  border: solid 2px #e9e9e9;
}

.product_image {
  width: 100%;
  text-align: center;
}

.product_image img {
  width: 70%;
  height: 70%;
}

<!--  Start to products display  -->

<ul class="inline-item pt-2" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
  <li class="list-inline-item  mb-1" id="product_list">
    <div class="product-item mb-1">
      <div class="product">
        <div class="product_image">
          <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
        </div>

        <div class=" text-center mb-0 ">
          <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
          <h6 class="product_name">
            <p class="card-text m-0">
              <label> Ahirvad </label>
              <button type="button" class="btn  btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
            </p>
          </h6>
          <p class=" mb-0">
            <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
          </p>
          <div class="product_price">
            <span>MRP : <del>$50</del></span> &#10073; <span> <b> Sale : $40 </b> </span>
          </div>
          <div class="quantity mb-1 ">
            <input type="button" value="-" class="minus  " style="border-radius:50px;">
            <span> 1 </span>
            <input type="button" value="+" class="plus" style="border-radius:50px;">
          </div>
          <div class="  text-center my-2 ">
            <a class="btn  btn-sm text-white" id="background_color" href="#">add to cart</a>
          </div>
        </div>

      </div>
    </div>

  </li>

  <li class="list-inline-item  mb-1" id="product_list">
    <div class="product-item mb-1">
      <div class="product">
        <div class="product_image">
          <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
        </div>


        <div class=" text-center mb-0 ">
          <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
          <h6 class="product_name">
            <p class="card-text m-0">
              <label> Ahirvad </label>
              <button type="button" class="btn  btn-sm text-white " id="background_color" data-toggle="modal" data-target="#myModal1"> 1kg </button>
            </p>
          </h6>
          <p class=" mb-0">
            <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
          </p>
          <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                                    Sale : $40 </b> </span> </div>
          <div class="quantity mb-1 ">
            <input type="button" value="-" class="minus  " style="border-radius:50px;">
            <span> 1 </span>
            <input type="button" value="+" class="plus" style="border-radius:50px;">
          </div>
          <div class="  text-center my-2 "><a class="btn  btn-sm text-white" id="background_color" href="#">add to cart</a></div>
        </div>

      </div>
    </div>

  </li>
  ........
</ul>

Этот код я использую для отображения продуктов, при отображении, если содержимое элементов списка и изображения все одинаковые, он будет отображаться четко.Если я вставлю какой-либо контент внутрь выравнивания по высоте, возникнет проблема.

Answer 1

             <ul class="inline-item pt-2 d-flex flex-wrap" style="padding-left:0px;padding-right:0px;" id="product_list_grid">
                <li class="list-inline-item  mb-1" id="product_list">
                    <div class="product-item mb-1">
                        <div class="product">
                            <div class="product_image">
                                <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
                            </div>


                            <div class=" text-center mb-0 ">
                                <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
                                <h6 class="product_name">
                                    <p class="card-text m-0">
                                        <label> Ahirvad </label>
                                        <button type="button" class="btn  btn-sm text-white " id="background_color"
                                            data-toggle="modal" data-target="#myModal1">
                                            1kg
                                        </button>
                                    </p>
                                </h6>
                                <p class=" mb-0">
                                    <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
                                </p>
                                <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                            Sale : $40 </b> </span> </div>
                                <div class="quantity mb-1 ">
                                    <input type="button" value="-" class="minus  " style="border-radius:50px;">
                                    <span> 1 </span>
                                    <input type="button" value="+" class="plus" style="border-radius:50px;">
                                </div>
                                <div class="  text-center my-2 "><a class="btn  btn-sm text-white" id="background_color"
                                        href="#">add
                                        to cart</a></div>
                            </div>

                        </div>
                    </div>

                </li>

                <li class="list-inline-item  mb-1" id="product_list">
                    <div class="product-item mb-1">
                        <div class="product">
                            <div class="product_image">
                                <a href="single.html"> <img src="images/FREEDOM.png" alt=""></a>
                            </div>


                            <div class=" text-center mb-0 ">
                                <h6 class="product_brand"><a class="text-dark" href="single.html">Ashirvad</a></h6>
                                <h6 class="product_name">
                                    <p class="card-text m-0">
                                        <label> Ahirvad </label>
                                        <button type="button" class="btn  btn-sm text-white " id="background_color"
                                            data-toggle="modal" data-target="#myModal1">
                                            1kg
                                        </button>
                                    </p>
                                </h6>
                                <p class=" mb-0">
                                    <span>20pc/Box</span> &#10073; <span>Min 5 boxes</span>
                                </p>
                                <div class="product_price"> <span>MRP : <del>$50</del></span> &#10073; <span> <b>
                                            Sale : $40 </b> </span> </div>
                                <div class="quantity mb-1 ">
                                    <input type="button" value="-" class="minus  " style="border-radius:50px;">
                                    <span> 1 </span>
                                    <input type="button" value="+" class="plus" style="border-radius:50px;">
                                </div>
                                <div class="  text-center my-2 "><a class="btn  btn-sm text-white" id="background_color"
                                        href="#">add
                                        to cart</a></div>
                            </div>

                        </div>
                    </div>

                </li>

                </ul>

                <style>

                /* Start to css for product list */

                #product_list {width:210px;
                  margin-right: 0px;
                 font-size: 14px;}
                .product-item
                {
                width: 100%;
                height: 350px;
                cursor: pointer;
                background-color: #FFFFFF;
                }

                .product {
                  width: 100%;
                  height: auto;
                  border: solid 2px #e9e9e9;
                  max-height: 600px;
                }
                .product_image
                {
                width: 100%;
                text-align: center;
                }
                .product_image img
                {

                width: 70%;
                height:70%;
                }

                /* END to css for product list */




                </style>

используйте теги "d-flex" и "flex-wrap" для тега ul.и используйте максимальную высоту вместо высоты.

Надеюсь, это будет полезно.