html - css - 如何在未指定父 div 宽度时使 p 元素的宽度为 's width follows parent div ' s

标签 html css image width

<分区>

我有一个包含图像和 p 元素的父 div。我无法更改图像的尺寸,div 宽度不能超过图像宽度,所以我将图像设为 block 元素。但之后我在 p 元素中有一个长文本,它使 p 元素的宽度超过其父 div 宽度。如何使 p 元素的宽度与其父 div 及其兄弟图像相同。

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

img {
    display: block;
}

最佳答案

可能不是最好的解决方案:

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>

关于html - css - 如何在未指定父 div 宽度时使 p 元素的宽度为 's width follows parent div ' s,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57958350/

上一篇:css - Safari 错误与转换和 translateY : "jumping" element

下一篇:javascript - 如何在没有持续回流的情况下动态调整高度的文本区域?

相关文章:

html - 更改 html 表中的一些(不是全部)标题高度

jquery - 谷歌浏览器不会在单选按钮上触发模糊事件?

javascript - 无限图像自动收报机动画口吃

css - Foundation 5 CSS Z-index 顶部栏下拉菜单问题

iphone - 如何在 ios 中将图像上传到 .ashx url

image - 如何使图像的一部分变成黑色?

javascript - 如何让这个箭头不断旋转

javascript - 如何解决此问题以将图像从 HTML div 元素添加到谷歌地图标记弹出内容?

html - Logo 不完整,背景图片

java - 如何有效地实现 java.awt.Composite?