为什么我的CSS/布局在AJAX/JavaScript运行后会发生变化？

在用户单击时，我运行一个AJAX调用从第三方API获取数据。在执行操作之前，正确呈现前端/布局，但在将数据提取并填充到前端之后，布局会发生更改

经过多次调试后，继承的关系似乎发生了变化

可能是什么问题/为什么

这是受影响的HTML部分：

#mainContent.fourthRow.Goals{
浮动：左；
宽度：20%；
高度：280px；
右边距：5px；
背景色：#F2F8FF；
}
#主要内容。四投。进球栏{
背景色：#F2F8FF；
显示：内联块；
浮动：左；
身高：100%；
宽度：24.3%；
文本对齐：居中；
右边框：1px实心；
右边距：1px；
边框颜色：#DADADA；
字体系列：“Muli”，无衬线；
字体大小：粗体；
字体大小：15px；
}
#主要内容。四投。进球栏p{
高度：40px；
边框底部：1px实心；
边框颜色：#DADADA；
字体系列：“Muli”，无衬线；
垂直对齐：中间对齐；
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
}

进球

SGPM

失球

CGPM

目标总数

GTPM

家







远离







总数

在ajax请求之前，的div#goals(目标)home(有一个

p

标记。而

p

标签的样式具有

高度：40px

，因此

的div#goals(目标)home 40px高度。但是在ajax请求之后，您的javascript可能会根据响应json数据编辑DOM，而

的

div#goals(目标)home(

会丢失其子

p

标记。它也失去了高度。 长话短说，试试：

#mainContent .fourthRow #goals_home_for {
   height: 40px;
   <!-- Rest is omitted -->
}

#主要内容。四掷球#目标#主场#{
高度：40px；
}

---

或者编辑javascript，使其围绕每个数据包装

p

标记。

，因为HTML已更改。您提到的样式规则应用于

元素，该元素不再出现在第二个图像中。在AJAX回调中，似乎没有将文本包装在

中。虽然没有看到这段代码，但我们只能告诉您出了什么问题，我们无法提供适当的解决方案$（“#目标总数”）.html（目标总数）；目标\总目标\主场=目标\主场\为+目标\主场\反对$（“#goals_total_home”）.html（goals_total_home）；goals\u total\u away=goals\u away\u for+goals\u away\u反对$（“#goals_total_away”）.html（goals_total_away）.html（）设置为值；它应该将html设置为包含该值的

<例如，code>$（“#goals_total_home”）.html（`p>${goals_total_home}

`）。因此，我****的主要部分是，我通过将数据填充到我的html中删除了标记，因为我没有在后端插入它们。非常感谢。无法编辑主帖子，因为一个mod编辑了它，现在它有一些奇怪的错误。但我解决了我最初的问题。非常感谢你。来自德国的比瑞什问候谢谢你的洞察力。不过，我想避免使用这种解决方案，因为我有几十个ID，我必须提及，不是吗？当然，这只是众多解决方法之一。我认为更改javascript代码更合理。但是您没有提供javascript代码，所以我所要做的就是建议更改css。顺便说一句，您的html格式不正确，例如

。您的第二个ID只是试图解决上述问题；）@Phanti，一个html标记不能有多个ID。ID应该是唯一的。格式错误的html不会试图解决问题；这是个问题。