<分区>
我不确定我是否能够正确地表达问题,但我想要完成的是简单易懂的示例。
请看这个:
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;
}