css-当未指定父级div宽度时，如何使p元素的宽度遵循父级div的宽度

Question

我有一个可容纳图像和p元素的父div。我无法更改图像的尺寸，并且div宽度不能超过图像的宽度，因此我将图像设置为块元素。但是之后，我在p元素内有一个长文本，这使p元素的宽度超过了其父div宽度。如何使p元素的宽度与其父div及其兄弟图像相同。

<div>
    <img src="some-url">
    <p>some-really-long-text</p>
</div>

img {
    display: block;
}

Answer 1

可能不是最佳解决方案：

div {
    display: table-caption;  
}

img {
    display: block;
}

<div>
    <img src="http://placehold.it/200x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar odio id felis maximus sodales. Vestibulum velit mi, feugiat at enim in, varius vestibulum erat. Fusce orci risus, laoreet nec enim et, placerat accumsan massa. In ut purus elit. Donec hendrerit velit id mi eleifend pharetra. Nunc imperdiet interdum interdum. Suspendisse tincidunt, augue in accumsan ornare, nulla nisl tempor purus, et molestie orci massa in nunc. Praesent faucibus enim eros, ut blandit nisi efficitur in. In tincidunt velit id urna vehicula, in condimentum odio convallis. Vestibulum ligula odio, egestas vel lectus sed, consectetur porta libero.</p>
</div>