主页 / coding / 问题 / 79332314
Accepted
Huzaifa Zahid
Asked: 2025-01-06 15:02:58 +0800 CST

如何通过最小高度和响应式设计确保产品卡片布局统一？

  • 772

我正在为购物页面设计产品卡片布局。该页面将以多行多列的网格形式显示卡片。我的目标是确保所有产品卡片看起来统一且平衡，无论其内容长度如何。以下是我想要实现的目标：

1-图像容器应该占据父容器高度的65％ 。

2-内容容器应该占据父容器高度的35％ 。

3-通过在父容器上设置最小高度，所有卡片应该具有相同的高度。

4- 布局应该在移动设备屏幕上具有两列响应。

问题：

我遇到了以下问题：

1-当我对图像容器使用 flex: 0 0 65% 并对内容容器使用 flex: 0 0 35% 时，图像容器的大小不会按预期默认为父容器的 65%。

2-如果我在图像容器中添加内容（例如，lorem * 35），其大小会因为内容而增加，而不是因为图像容器的大小而增加。

3-如果我对图像容器使用 flex：1 0 65%，对内容容器使用 flex：0 0 35%，则图像大小会增加，但内容容器的大小不会保持在 35%。


            <div className="feature-item-img-container limited-item-img-container">


              <div
                className="limited-img-two"
                style={{
                  backgroundImage: `url("${product.images.secondImage}")`,
                }}
              > 

                
              <div className="feature-item-btn-container" >
                <p>Add to cart</p>
              </div>
              </div>

            </div>





.feature-item-img-container {
    flex: 1 0 65%; /* Child1 takes 65% of the height, effectively flex-grow 3 */
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    background-color: #FFDF00;
    position: relative;

    
}

.limited-img-two {
  
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit:  cover;
  transition: opacity 0.3s ease-in;

  background-size: cover; /* Ensure the image covers the entire div */
  background-position: center; /* Center the image within the div */
  background-repeat: no-repeat; /* Prevent repeating of the image */
  /* position: relative; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


.limited-item-details-container {
  flex: 1 0  35%;
  background-color: aliceblue;
  

}

我需要帮助：

1-如何确保图像容器和内容容器**在遵守最小高度的同时分别占据父容器高度的 65％ 和 35％？

2-为什么对图像容器使用 flex: 1 0 65% 会导致图像尺寸增加，但内容尺寸却无法保持在 35%？

3- 目前开发人员使用哪些最佳实践来创建统一的产品卡网格？

4-是否有任何推荐的资源或免费源代码网站，我可以在其中找到可重复使用的产品卡网格组件？

css

1 个回答

  1. Best Answer

    使用flex是您在这里做的最麻烦的事情。您应该使用grid网格，因为网格确保所有元素的宽度和高度都是固定的，并且不受子（卡片）元素比例的影响。

    您应该遵循以下几点：

    <div class="grid-container">
  <div class="feature-item-img-container limited-item-img-container">
    <div
      class="limited-img-two"
      style="background-image: url('your-image-url.jpg');"
    >
      <div class="feature-item-btn-container">
        <p>Add to cart</p>
      </div>
    </div>
  </div>
  <!-- Repeat the above structure for more cards -->
</div>

    /* Container Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Default: 2 columns */
  gap: 16px; /* Add spacing between cards */
  padding: 16px;
}

/* Adjust to 4 columns on larger screens like PC/Desktop */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card Styling */
.feature-item-img-container {
  position: relative;
  background-color: #f5f5f5; /* Placeholder background color */
  border-radius: 8px; /* Optional: Rounded corners */
  overflow: hidden;
}

/* Background Image */
.limited-img-two {
  height: 200px; /* Adjust height as needed, for your case 65% of parent */
  background-size: cover;
  background-position: center;
}

/* Button Container */
.feature-item-btn-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: #fff;
  padding: 8px;
  font-size: 16px;
}

    如果您需要任何更改请告诉我。

    • 1

相关问题