css 如何对齐产品卡，使其在该部分内以有序的方式显示为三张

64jmpszr 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(78)

产品卡看起来总是向左对齐，但它应该以有序的方式正确对齐，使它看起来更好。
我尝试使用Flex属性，但项目随后以垂直方式对齐，这使它非常不舒服。
有没有一种方法可以把这三个东西都有序地展示出来？
这是enter image description here目前的外观
下面是使用的html和css代码片段：

.product-container
{
  padding-right:10vw;
  display: inline-block;
  overflow-x: auto;
  scroll-behavior: smooth; 
}
.product-container::-webkit-scrollbar{
  display: none;
}
.products{
  padding: 0 10vw;
}
.product-card{
  flex: 0 0 auto;
  width: 196px;
  height: 600px; 
  margin-right: 40px;
}
.product-image{
  position: relative;
  width: 196px;
  height: 350px; 
  overflow: hidden;
  
}
.product-thumb{
  width:196px;
  height:350px;
  object-fit: cover;
}

<section class="products">
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card2.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$59</span><span class="orgprice">$99</span>
                    <h2 class="brand">Adidas</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card4.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$69</span><span class="orgprice">$129</span>
                    <h2 class="brand">Reebok</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div class="product-container">
              <div class="product-card">
                  <div class="product-image">
                      <img src="images/card5.jpg" alt="" class="product-thumb" height="350px" width="220px">
                      <button class="addtocartbtn"> Add To Cart </button>
                  </div>
                  <div class="shoe-specs">
                    <span class="disprice">$89</span><span class="orgprice">$149</span>
                    <h2 class="brand">Nike</h2>
                    <p class="spec">Running Shoes</p>
                    
                  </div>
              </div>
            </div>

css

来源：https://stackoverflow.com/questions/74949419/how-can-the-product-cards-be-aligned-so-that-they-appear-as-three-inside-the-sec

2条答案

按热度按时间

jogvjijk1#

现在，您可以在products类上使用display: flex。

.product-container {
  padding-right: 10vw;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.product-container::-webkit-scrollbar {
  display: none;
}

.products {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.product-card {
  
  width: 196px;
  height: 600px;
}

.product-image {
  position: relative;
  width: 196px;
  height: 350px;
  overflow: hidden;

}

.product-thumb {
  width: 196px;
  height: 350px;
  object-fit: cover;
}

<section class="products">
  <div class="product-container">
    <div class="product-card">
      <div class="product-image">
        <img src="images/card2.jpg" alt="" class="product-thumb" height="350px" width="220px">
        <button class="addtocartbtn"> Add To Cart </button>
      </div>
      <div class="shoe-specs">
        <span class="disprice">$59</span><span class="orgprice">$99</span>
        <h2 class="brand">Adidas</h2>
        <p class="spec">Running Shoes</p>

      </div>
    </div>
  </div>
  <div class="product-container">
    <div class="product-card">
      <div class="product-image">
        <img src="images/card4.jpg" alt="" class="product-thumb" height="350px" width="220px">
        <button class="addtocartbtn"> Add To Cart </button>
      </div>
      <div class="shoe-specs">
        <span class="disprice">$69</span><span class="orgprice">$129</span>
        <h2 class="brand">Reebok</h2>
        <p class="spec">Running Shoes</p>

      </div>
    </div>
  </div>
  <div class="product-container">
    <div class="product-card">
      <div class="product-image">
        <img src="images/card5.jpg" alt="" class="product-thumb" height="350px" width="220px">
        <button class="addtocartbtn"> Add To Cart </button>
      </div>
      <div class="shoe-specs">
        <span class="disprice">$89</span><span class="orgprice">$149</span>
        <h2 class="brand">Nike</h2>
        <p class="spec">Running Shoes</p>

      </div>
    </div>
  </div>

赞(0）回复(0）举报 2022-12-30

imzjd6km2#

从以下位置移除衬垫：

.product-container
 {
  padding-right:10vw; <--- Remove this padding.
  display: inline-block;
  overflow-x: auto;
  scroll-behavior: smooth; 
  }

然后在产品中应用CSS

.products {
display: flex;
justify-content: center;
align-items: center;
column-gap: 10vw;
 }

赞(0）回复(0）举报 2022-12-30

我来回答

css 如何对齐产品卡，使其在该部分内以有序的方式显示为三张

2条答案

相关问题

热门标签

最新问答