javascript - 使用 jQuery 添加文本后，嵌套 div float 在包含 div 之外

Question

我遇到一个问题，一旦我使用 jQuery 的 .html() 将段落插入嵌套 div 中。它导致它漂浮在它包含的 div 之外。我尝试过调整两个 div 的边距和填充，但没有成功。我是 javascript/jQuery 的新手，非常想了解为什么会发生这种情况。我在这里先向您的帮助表示感谢。

这是屏幕截图链接:

这是我的 html:

<div class="selectHero">
  <div id="ironMan"></div>
  <div id="capAmerica"></div>
  <div id="thor"></div>
  <div id="winterSoldier"></div>
</div>

这是我的 JavaScript:

$('#ironMan').html("<p>IronMan</p>"+"<p> health: "+ironMan.health+"</p>");

这是我的 CSS:

.selectHero {
  max-height: 250px;
  max-width: 900px;
}

#ironMan {
  background-image: url("../images/ironMan.jpg");
  background-size: cover;
  height: 200px;
  width: 200px;
  display: inline-block;
  text-align: center;
  color: white;
  font-size: 26px;
}

Answer 1

尝试使用background-size属性。我想这里发布了类似的问题 -

Fit background image to div