产品展示时的高度对齐问题

Question

我正在做一个电子商务项目。在显示产品列表时，如果我在其中插入任何内容，高度将会变化并且总对齐会受到干扰。

您可以看到下面的代码。我正在使用引导程序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标签。并使用max-height代替height。

我希望这会有所帮助。