當內容框大小改變時換行Div？

Question

我有一個內容框，根據來源更改大小。

下面有一個標題和信息div水平內聯顯示。

如果內容框很大，但看起來很好，但如果標題和信息覆蓋範圍很小，則可以擴展。

當內容框小於標題/信息寬度時，如何獲得標題和信息堆棧？

但與分辨率媒體查詢不同，瀏覽器大小保持不變，只有框更改大小。

https://jsfiddle.net/hphzh1ea/

大（良好）

小（在擴展）

積疊式小型（它是如何需要看）

HTML

<div class="container"> 

    <div class="content">content</div> 

    <div class="info"> 
    <div class="title">Title Title Title</div> 
    <div class="description">info info info info info info info info info</div> 
    </div> 

</div> 

CSS

.container { 
    display: inline-block; 
    margin: auto; 
    text-align: center; 
    padding: 1em; 
    border: 1px solid black; 
} 
.content { 
    margin: auto; 
    width: 200px; 
    height: 150px; 
    background: gray; 
} 

.info { 
    display: inline-block; 
} 
.title { 
    display: inline-block; 
    margin: 0 0 1em 0; 
    font-weight: bold; 
} 
.description { 
    display: inline-block; 
} 

Answer 1

不知道，如果你正在尋找一個純HTML/CSS解決方案，但也許我寫的這個簡單的jQuery腳本 有幫助？

$(".container").find(function() { 
    var contentWidth = $(".content").outerWidth(); 
    var infoWidth = $(".info").outerWidth(); 
    if (contentWidth < infoWidth){ 
    $(".description").css('display', 'block'); 
    } 
});