Html：视频卡img a悬停

您好，当我浏览图片时，我想知道“如何”，但心脏位于其他位置。错在哪里

我不明白的一点是，为什么我的卡片宽度似乎过大了

因为我在图片中显示的溢出。当我将一张卡添加到第二张卡时。牌倒过来了。

.card视频{
宽度：305px；
显示器：flex；
弯曲方向：立柱；
}
.卡片图片{
对象匹配：覆盖；
宽度：100%；
身高：100%；
最大宽度：305px；
最大高度：170px；
}
.卡信息标志{
位置：绝对位置；
右：5px；
顶部：-28px；
}
.卡信息标识img{
宽度：55px；
边界半径：50%；
边框：4px实心#5e4b55；
}
.信用卡信息{
位置：相对位置；
背景色：#292828；
高度：90px；
填充：7px 10px 10px 10px；
显示器：flex；
弯曲方向：立柱；
}
.卡片信息顶部{
弹性：1；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.卡信息.卡信息类别{
颜色：#546e7a；
字体大小：14px；
}
.卡片信息.卡片信息标题{
颜色：#546e7a；
字体大小：14px；
垫底：5px；
}
.卡片信息底部{
边框顶部：实心1px#44393e；
填充顶部：7px；
显示器：flex；
对齐项目：居中；
线高：1；
证明内容：之间的空间；
}
.卡片信息.卡片信息底部.视图{
颜色：#546e7a；
字体大小：12px；
}
.卡片信息.卡片信息底部.日期{
颜色：#546e7a；
字体大小：12px；
}
.卡片图片{
显示器：flex；
柔性包装：包装；
保证金：0；
填充：0；
列表样式：无；
}
.剪辑图标{
位置：相对位置；
}
.剪辑图标：悬停{
背景色：红色；
}

视频类别
视频标题
312K
16小时前

。卡视频有流向列。 如果你试着像这样放更多的牌，它总是会像一堆一样倒立显示。在div中包装整个内容，并提供流向：row和flex Wrap:Wrap以获得所需的结果

.box{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.卡视频{
宽度：305px；
显示器：flex；
弯曲方向：立柱；
保证金：0.5雷姆；
}
.卡片图片{
对象匹配：覆盖；
宽度：100%；
身高：100%；
最大宽度：305px；
最大高度：170px；
}
.卡信息标志{
位置：绝对位置；
右：5px；
顶部：-28px；
}
.卡信息标识img{
宽度：55px；
边界半径：50%；
边框：4px实心#5e4b55；
}
.信用卡信息{
位置：相对位置；
背景色：#292828；
高度：90px；
填充：7px 10px 10px 10px；
显示器：flex；
弯曲方向：立柱；
}
.卡片信息顶部{
弹性：1；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
.卡信息.卡信息类别{
颜色：#546e7a；
字体大小：14px；
}
.卡片信息.卡片信息标题{
颜色：#546e7a；
字体大小：14px；
垫底：5px；
}
.卡片信息底部{
边框顶部：实心1px#44393e；
填充顶部：7px；
显示器：flex；
对齐项目：居中；
线高：1；
证明内容：之间的空间；
}
.卡片信息.卡片信息底部.视图{
颜色：#546e7a；
字体大小：12px；
}
.卡片信息.卡片信息底部.日期{
颜色：#546e7a；
字体大小：12px；
}
.卡片图片{
显示器：flex；
柔性包装：包装；
保证金：0；
填充：0；
列表样式：无；
}
.剪辑图标{
位置：相对位置；
}
.剪辑图标：悬停{
背景色：红色；
}
视频类别
视频标题
312K
16小时前
视频类别
视频标题
312K
16小时前

。卡视频有流向列。 如果你试着像这样放更多的牌，它总是会像一堆一样倒立显示。在div中包装整个内容，并提供流向：row和flex Wrap:Wrap以获得所需的结果

.box{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
}
.卡视频{
宽度：305px；
显示器：flex；
弯曲方向：立柱；
保证金：0.5雷姆；
}
.卡片图片{
对象匹配：覆盖；
宽度：100%；
身高：100%；
最大宽度：305px；
最大高度：170px；
}
.卡信息标志{
位置：绝对位置；
右：5px；
顶部：-28px；
}
.卡信息标识img{
宽度：55px；
边界半径：50%；
边框：4px实心#5e4b55；
}
.信用卡信息{
位置：相对位置；