当内容框大小改变时换行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'); 
    } 
});