CSS：没有明确宽度和自动换行的嵌套元素
我试图在不明确了解图像宽度的情况下将标题放置在图像下方。我希望标题延伸到整个图像宽度，但不拉伸父元素的宽度并换行。
我想避免使用 javascript （读取元素并将宽度应用于元素）或使用 max-width:123px 因为可能的宽度范围很大。
目前的代码看起来像这样，但可以自由更改。图像宽度未知，但受限于最大尺寸。
<div style="float:right; width:auto;">
<img src="http://" \>
<div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
My caption which can be longer then the image above and should wrap, I do not want to use max-width.
</div>
</div>
欢迎任何建议。
I am trying to position a caption below an image without explicit knowledge of the images' width. I would like the caption to extend to the full image width, but not to stretch the parent elements' witdh and wrap the lines instead.
I would like to avoid using javascript (reading and applying widths to elements) or using max-width:123px as the range of possible widths is big.
The code currently looks something like this, but can be changed freely. The image width is unknown, but restricted to a maximum dimension.
<div style="float:right; width:auto;">
<img src="http://" \>
<div style="clear:right; min-width:100px; max-width:200px; word-wrap:break-word;">
My caption which can be longer then the image above and should wrap, I do not want to use max-width.
</div>
</div>
Any suggestions welcome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先，从 html 中获取样式；这些属于CSS。
然后，我认为你可以做的是将 div 的位置设置为“相对”，但将其宽度保留为自动，并将其溢出设置为“隐藏”。隐藏设置应该强制它足够大以容纳其所有子元素。
然后将标题设置为位置：自动、底部：0、左侧：0、宽度：100%。
这应该可以实现您正在寻找的内容。
first, get the styles out of the html; those belong in CSS.
then, I think what you can do is set the div's position to "relative", but leave its width to auto and its overflow to "hidden". The hidden setting should force it to be big enough for all its child elements.
The caption, you then set to position:auto, and bottom:0, left:0, width:100%.
That should accomplish what you're looking for.
您可以将标题 div 的宽度设置为父级的某个百分比。
也就是说，如果父级是 (x)px 宽（由于内部图像导致它那么宽），则标题框宽度可以设置为某个 %（宽度：100%；也许）。
You could set the width of the caption div to some % of the parent.
That is, if the parent is (x)px wide (due to the image inside causing it to be that wide) then the caption box width can be set to some % (width:100%; perhaps).