使包装器采用子图像的最大宽度？

Question

我不确定我是否能够正确说出问题的意思，但是我想通过示例简单地了解要完成的工作。

请看一下：

http://codepen.io/anon/pen/XKKvBx

我基本上希望它看起来像这样：

http://codepen.io/anon/pen/xOOvJB

但是没有给wqrapping div一个固定的宽度。因此，基本上，我希望包装器采用图像的宽度而不是过度扩展的文本。有什么办法吗？

还要注意，我不能使用绝对定位，因为从数据库传来的图像和文本每次都不同。

来自第一个链接的代码：

<div class="wrapper">

  <img src="https://placekitten.com/300/300">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

.wrapper {

  border: 1px solid red;

  display: inline-block;

}

来自第二个链接的代码：

<div class="wrapper">

  <img src="https://placekitten.com/300/300">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

.wrapper {

  width: 300px;

  border: 1px solid red;

}

Answer 1

无需增加宽度并仍然显示：表格标题在chrome和firefox中都可以正常工作，请尝试一下，.wrapper {&nbsp; border: 1px solid red;&nbsp; display: table-caption;}&nbsp;