Html 背景颜色与文本和图像显示不正确

在我的推荐信旁边有照片和文字（中途向下滚动）。我希望灰色背景只出现在文本上。我试着这样做，将它添加到文本div中，但没有成功。因此，我将它添加到包含图像的容器div（pic推荐），但现在它显示在图像周围，我根本不希望它出现在图像之外。我不知道如何解决这个问题

。证明容器{
宽度：80%；
边界：无；
保证金：自动；
}
/*移动电话*/
.推荐性imga，
.推荐性imgb，
.推荐文本a，
.证明文件B{
宽度：100%；
}
.推荐性imga，
.证明性imgb{
浮动：左；
}
.推荐文本a，
.证明文件B{
浮动：左；
填充：15px；
宽度：100%；
文本对齐：居中；
字体大小：1.3em；
}
.pic推荐信：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
.证明照片{
最大宽度：100%；
身高：451px；
}
@仅介质屏幕和（最小宽度：768px）{
/*用于桌面*/
.pic证明文件{
背景色：#DFE3E6；
溢出：自动；
边缘底部：30px；
}
.推荐性imga，
.推荐文本a，
.推荐性imgb，
.证明文件B{
宽度：50%；
}
.推荐性imga{
浮动：左；
}
.证明性imgb{
浮动：对；
}
.证明文件{
浮动：对；
填充：15px；
宽度：50%背景色：#DFE3E6；
}
.证明文件B{
浮动：左；
填充：15px；
宽度：50%
}
.照片1{
显示：块；
身高：451px；
溢出：隐藏；
位置：相对位置；
}
.证明照片{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.测试文本，
.test-text2{
位置：相对位置；
}
.测试文本p{
保证金：0；
位置：绝对位置；
最高：50%；
左：25%；
转换：翻译（-16%，80%）；
文本对齐：居中；
}
.test-text2p{
保证金：0；
位置：绝对位置；
最高：50%；
左：25%；
转换：翻译（-16%，15%）；
文本对齐：居中；
}
}
.推荐性文本{
颜色：#235A4A；
}
.推荐文本B p{
颜色：#235A4A；
}

“这些白色黄玉耳环非常华丽。这些宝石可以采光，非常漂亮。它们可以穿上也可以穿下，而且工艺上乘。这是一对与任何东西搭配的绝佳耳环。”
-阿曼达·科德威尔

//更多pic认证块

从.pic推荐类中删除背景色。及

添加以下CSS：

.pic-testimonial {
  display: flex;
  flex-wrap: wrap;
}
.testimonial-texta {
    width: 50%;
    background-color: #DFE3E6;
}

---

你错过了

.commential texta

中的code>后宽度属性。我已经纠正了它

从.pic推荐类中删除了

背景色

。及

添加以下CSS：

.pic-testimonial {
  display: flex;
  flex-wrap: wrap;
}
.testimonial-texta {
    width: 50%;
    background-color: #DFE3E6;
}

---

你错过了

.commential texta

中的code>后宽度属性。我已经纠正了它。

首先你在“.pic鉴定”类中删除背景色，然后在“.test text p”类中添加背景色，你就得到了答案。

首先你在“.pic鉴定”类中删除背景色，然后在“.pic鉴定”类中添加背景色，你就得到了答案。

这样更好。如何将背景添加到包含图像的div的右侧？我想让它从图片的右边一直延伸到另一边。你需要为.Certificational texta和.Certificational textb添加背景色css，或者你可以为两者添加公共类，并将css应用到itI。正如你所述，我确实为Certificational texta添加了背景色，并且填充了该div框。但是图像在另一个div框中居中，这就是为什么它的右侧有空间。我不知道如何使背景颜色相同。我不希望整个图像的div是背景色，就在它的右边。这样更好。如何将背景添加到包含图像的div的右侧？我想让它从图片的右边一直延伸到另一边。你需要为.Certificational texta和.Certificational textb添加背景色css，或者你可以为两者添加公共类，并将css应用到itI。正如你所述，我确实为Certificational texta添加了背景色，并且填充了该div框。但是图像在另一个div框中居中，这就是为什么它的右侧有空间。我不知道如何使背景颜色相同。我不希望整个div的图像是背景色，只是在它的右边。