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

问题描述

在用户单击时，我运行 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 运行后搞砸了：

标签： javascriptjqueryhtmlcss

在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标签包装在每个数据周围。

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

问题描述

解决方案

推荐阅读