css - 具有等于​​容器的 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;
}