Css 产品卡不合适

我想像这样在图像上显示折扣标签，但我在下面的图像中得到了类似的效果

折扣标签显示在图像上方

我不想在css文件的第三行命令中用白色隐藏颜色。还有其他方法可以实现吗

此外，我想展示具有适当外观的产品。但是它看起来不好，产品卡片的高度取决于我添加的内容。我正在使用mdBootstrap来设计样式

有人能帮我吗

我的代码：

.形状{ 边框颜色：E87E0E； /*边框颜色：RGBA255255,0 E87E0E RGBA255255,0 RGBA255255,0*/ 边框左下半径：80px； 边框样式：实心； 边框宽度：0 70px 40px 0； 浮动：对； 高度：5px； 宽度：0px； 变换：旋转360度； } .形状文本{ 颜色：fff； 字体大小：12px； 字体大小：粗体； 位置：相对位置； 右：-40px； 顶部：2个； 空白：nowrap； 变换：旋转30度； } .卡片产品.img包装{ 边界半径：3px3px0； 溢出：隐藏； 位置：相对位置； 高度：220px； 文本对齐：居中； } .卡片产品.img包装img{ 最大高度：100%； 最大宽度：100%； 对象匹配：覆盖； } 17% {{product.ProductName} 132篇评论 154份订单 卢比{{产品价格} 1980卢比

---

我没有试着用JS fiddle检查，而是试着去掉边框左下角的半径：80px

如果确实希望形状位于图像顶部，则必须使用position:absolute；，将其从文档流中删除，浮子在这里帮不了你

然后将z指数调整为更高的数值，尝试999并调整.shape的position:absolute，然后添加position:relative（相对于.折扣）

.折扣{ 位置：相对位置； } .形状{ 边框颜色：E87E0E； /*边框颜色：RGBA255255,0 E87E0E RGBA255255,0 RGBA255255,0*/ 边框左下半径：80px； 边框样式：实心； 边框宽度：0 70px 40px 0； 高度：20px； 宽度：0； /*这是你应该添加的内容*/ z指数：999； 位置：绝对位置； 右：0； 排名：0； } .形状文本{ 颜色：fff； 字体大小：12px； 字体大小：粗体； 位置：相对位置； 右：-40px； 顶部：2个； 空白：nowrap； 变换：旋转30度； } .卡片产品.img包装{ 边界半径：3px3px0； 溢出：隐藏； 位置：相对位置； 高度：220px； 文本对齐：居中； } .卡片产品.img包装img{ 最大高度：100%； 最大宽度：100%； 对象匹配：覆盖； 宽度：100%； } 17% {{product.ProductName} 132篇评论 154份订单 卢比{{产品价格} 1980卢比

---

移除它的目的是什么？你知道图像的高度对齐吗？问题是什么？要移动图像还是形状？我在图片上加了一个宽度：100%，这可能是你想要的。不，正如我上面提到的，产品卡片的大小会根据里面的内容而变化，就像产品名称一样。如果我想显示所有具有相同高度的卡片以及所有内容，我应该怎么做？设置最小高度或固定高度，隐藏溢出或使用“阅读更多”链接或其他方式截断溢出