使用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