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

Question

在用户单击时，我运行 AJAX 调用以从第三方 API 获取数据。 在操作之前，前端/布局被正确呈现，但是在数据被获取并填充到前端之后，布局发生了变化。

经过几次调试，似乎继承关系发生了变化。

可能是什么问题/为什么会这样？

这是受影响的 HTML 部分：

 #mainContent.fourthRow.Goals { float: left; width: 20%; height: 280px; margin-right: 5px; background-color: #F2F8FF; } #mainContent.fourthRow.goalsColumn { background-color: #F2F8FF; display: inline-block; float: left; height: 100%; width: 24.3%; text-align: center; border-right: 1px solid; margin-right: 1px; border-color: #DADADA; font-family: 'Muli', sans-serif; font-weight: bold; font-size: 15px; } #mainContent.fourthRow.goalsColumn p { height: 40px; border-bottom: 1px solid; border-color: #DADADA; font-family: 'Muli', sans-serif; vertical-align: middle; display: flex; justify-content: center; align-items: center; text-align: center; }

 <div class="fourthRow"> <div class="Goals"> <div class="goalsColumn"> <div id="divGoal"><img id="goal" src="{% static "images/goal.png" %}" alt="soccergoal"></div> <div><p>Scored Goals</p></div> <div><p>SGPM</p></div> <div><p>Conceded Goals</p></div> <div><p>CGPM</p></div> <div><p>Goals Total</p></div> <div><p>GTPM</p></div> </div> <div class="goalsColumn"> <div><p>Home</p></div> <div id="goals_home_for" "goals_style"><p></p></div> <div id="goalsAvg_home_for"><p></p></div> <div id="goals_home_against"><p></p></div> <div id="goalsAvg_home_against"><p></p></div> <div id="goals_total_home"><p></p></div> <div id="goalsAvg_home_total"><p></p></div> </div> <div class="goalsColumn"> <div><p>Away</p></div> <div id="goals_away_for"><p></p></div> <div id="goalsAvg_away_for"><p></p></div> <div id="goals_away_against"><p></p></div> <div id="goalsAvg_away_against"><p></p></div> <div id="goals_total_away"><p></p></div> <div id="goalsAvg_away_total"><p></p></div> </div> <div class="goalsColumn"> <div><p>Total</p></div> <div id="goals_total_for2"><p></p></div> <div id="goalsAvg_total_for"><p></p></div> <div id="goals_total_against"><p></p></div> <div id="goalsAvg_total_against"><p></p></div> <div id="goals_total"><p></p></div> <div id="goalsAvg_total"><p></p></div> </div> </div>

在 JS/AJAX 运行之前更正：

JS/AJAX 运行后搞砸了：

Answer 1

在 ajax 请求div#goals_home_for之前有一个p标签。 p标签的样式有height: 40px ，所以div#goals_home_for有 40px 的高度。 但是在 ajax 请求之后，您的 javascript 可能会从响应 json 数据中编辑 DOM，并且div#goals_home_for会丢失其子p标签。 它也失去了它的高度。 长话短说，试试：

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

或编辑您的 javascript 以便将p标签包装在每个数据周围。