div宽度等于容器

Question

我可以找到一个带有标题的解决方案，其宽度等于它描述的图片：

看一下这个jsfiddle：https://jsfiddle.net/rbhmozvc/2/ 当你到达时，一切都很好，但如果你调整浏览器的高度，标题会比竞争对手大，而不是创建一个新行。

有什么想法吗？谢谢！

HTML：

<div id="contener">
<div id="inside">
    <div class="pic">
        <img class="img" src="http://www.wikinoticia.com/images2//s3.alt1040.com/files/2013/02/Twitter-ahora-habla-LOLCat.jpg">
        <div class="caption">Hello, This is a caption - Summer Spring 2014</div>
    </div>
     <div class="pic carre">
        <img class="img" src="http://www.wikinoticia.com/images2//s3.alt1040.com/files/2013/02/Twitter-ahora-habla-LOLCat.jpg">
        <div class="caption">Hello, This is a caption - Summer Spring 2014</div>
    </div>
    <div class="pic">
        <img class="img" src="http://www.wikinoticia.com/images2//s3.alt1040.com/files/2013/02/Twitter-ahora-habla-LOLCat.jpg">
        <div class="caption">Hello, This is a caption - Summer Spring 2014</div>
    </div>

</div>
</div>

Answer 1

因为你将白色空间设置为无包装。

#contener {
    white-space: nowrap;
}