使用jQuery添加文本之后，嵌套div在包含div之外浮动

我遇到问题，一旦我使用jQuery's .html()将段落插入到嵌套div中。这会导致它浮出它的包含div。我试着玩两个div的边距和填充，但无济于事。我是javascript/jQuery，并且很想知道为什么会发生这种情况。我在这里先向您的帮助表示感谢。使用jQuery添加文本之后，嵌套div在包含div之外浮动

下面是截图链接：

这里是我的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; 
}

来源

2016-05-16 Lance Martin

请加进的jsfiddle。根据你的HTML它不清楚理解。你可以检查你的显示属性，通过萤火虫内联块到其他通过 – Ajay2707