Html 由于图像大小，Div未正确对齐

错误对齐 预期对齐 正如你们可以清楚地从图片中看到的，每当我有一些高度不规则的图片时，我就有这样的对齐问题。我试着改变css，但没有任何效果。有什么建议吗？ 图像包含在div中，唯一的属性集是width:100%我尝试更改高度，但没有成功。还有一件事，如果图像大小大于800x600像素，它可以正常工作

代码（仅粘贴图像div和css，因为我知道图像属性中存在问题）

---

在经历了5000多行CSS之后 我能得到这样的东西

将以下内容添加到您的文件中：

main.css

.product {
  min-height: 350px;
  position: relative;
}

.product .product-info .product-price .price {
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  margin-right: 8px;
  position: absolute;
  bottom: 10px;
}

.product .product-info .product-price .price-before-discount {
  text-decoration: line-through;
  color: #d3d3d3;
  font-weight: 400;
  line-height: 30px;
  font-size: 14px;
  position: absolute;
  bottom: 10px;
  right: 60px;
}

.rateit {
  position: absolute;
  bottom: 40px;
}

.name {
  position: absolute;
  bottom: 60px;
}

.rateit{
    position:absolute;
}

rateit.css

.product {
  min-height: 350px;
  position: relative;
}

.product .product-info .product-price .price {
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  margin-right: 8px;
  position: absolute;
  bottom: 10px;
}

.product .product-info .product-price .price-before-discount {
  text-decoration: line-through;
  color: #d3d3d3;
  font-weight: 400;
  line-height: 30px;
  font-size: 14px;
  position: absolute;
  bottom: 10px;
  right: 60px;
}

.rateit {
  position: absolute;
  bottom: 40px;
}

.name {
  position: absolute;
  bottom: 60px;
}

.rateit{
    position:absolute;
}

注意：我刚刚添加了大尺寸设备，因此请使用相应的媒体查询

---

你能发布一些代码吗？我们不知道你的代码结构是什么。如果看不到代码，很难说。但是，您可以确保每个产品箱的高度相同，这将使它们彼此清晰。另一个选择是确保所有图像的大小都相同。您也可以使用flexbox或grid正确对齐项目。@Umer，可能存在明显的修复问题。分享你的代码。我用HTML和CSS分享了更多的代码