Html CSS-当给图像留有浮动时，内容是一个在另一个之上

嗨，我已经设计了用户配置文件页面。这里，在我的页面中，“上传照片”文本和“我的回复率”文本是一个在另一个上。我尝试清除浮动&我尝试了其他方法，但无法解决问题。问题仍然存在。请帮我把这个修好。提前谢谢

。仪表板配置文件wrp{
利润率：25px 0px；
边框：1px实心#b8c0c5；
填充：1.429雷姆；
边界半径：1px；
}
.仪表板配置文件wrp h3{
边际上限：0px；
边缘底部：25px；
边框底部：1px实心#b8c0c5；
}
.仪表板配置文件img{
身高：7.143雷姆；
宽度：7.143rem；
浮动：左；
}
.仪表板配置文件img内容{
保证金：自动；
左边距：1.429雷姆；
显示：内联块；
}
.仪表板配置文件img img{
最大高度：100%；
最大宽度：100%；
边界半径：50%；
}
.仪表板响应{
明确：两者皆有；
}

你的个人资料

普拉布佩鲁马尔

基本成员


我的回复率

40%

我的平均响应时间

2小时%

联系方式-

从

仪表板配置文件img

然后删除

你的个人资料

普拉布佩鲁马尔

基本成员


我的回复率

40%

我的平均响应时间

2小时%

联系方式-

在.dashboard响应类中，删除clear:float并引入CSS flexbox。另外，将此类的弹性方向设置为“column”

。仪表板配置文件wrp{
利润率：25px 0px；
边框：1px实心#b8c0c5；
填充：1.429雷姆；
边界半径：1px；
}
.仪表板配置文件wrp h3{
边际上限：0px；
边缘底部：25px；
边框底部：1px实心#b8c0c5；
}
.仪表板配置文件img{
身高：7.143雷姆；
宽度：7.143rem；
浮动：左；
}
.仪表板配置文件img内容{
保证金：自动；
左边距：1.429雷姆；
显示：内联块；
}
.仪表板配置文件img img{
最大高度：100%；
最大宽度：100%；
边界半径：50%；
}
.仪表板响应{
边缘顶部：30px；
显示器：flex；
弯曲方向：立柱；
}

你的个人资料

普拉布佩鲁马尔

基本成员


我的回复率

40%

我的平均响应时间

2小时%

联系方式-

解决这个问题有很多方法 试着给每一个分区分配一个边距，即在顶部和底部分配一个边距

例如：

<div id=1></div>
<div id=2></div>
<div id=3></div>
<script type=text/css>
#1{
margin:5px 5px 5px 5px ;
}
#2{
margin:5px 5px 5px 5px ;
}
#3{
margin:5px 5px 5px 5px ;
}
</script>

#1{
保证金：5px 5px 5px 5px；
}
#2{
保证金：5px 5px 5px 5px；
}
#3{
保证金：5px 5px 5px 5px；
}

缩小“上传照片”内容的字体大小，并使其处于绝对位置

这不是必要的解决方案，因为它稍微改变了设计。“上传照片”链接看起来更接近照片，给人一种更好的感觉

您还可以使其仅出现在图像的悬停处

。仪表板配置文件wrp{
利润率：25px 0px；
边框：1px实心#b8c0c5；
填充：1.429雷姆；
边界半径：1px；
}
.仪表板配置文件wrp h3{
边际上限：0px；
边缘底部：25px；
边框底部：1px实心#b8c0c5；
}
.仪表板配置文件img{
身高：7.143雷姆；
宽度：7.143rem；
浮动：左；
位置：相对位置；
}
.仪表板配置文件img内容{
保证金：自动；
左边距：1.429雷姆；
显示：内联块；
}
.仪表板配置文件img img{
最大高度：100%；
最大宽度：100%；
边界半径：50%；
}
.仪表板配置文件img.上传{
位置：绝对位置；
顶部：70像素；
字体大小：11px；
左：3px；
}

你的个人资料

普拉布佩鲁马尔

基本成员


我的回复率

40%

我的平均响应时间

2小时%

联系方式-

既然您使用的是引导，为什么不使用

.col

类来进行相同的设计呢？