CSS：无明确宽度和单词包裹的嵌套元素

Question

我试图将标题放在图像下方，而无需明确了解图像的宽度。我希望标题扩展到完整的图像宽度，但不要拉伸父元素的witdh并包裹线条。

我想避免使用JavaScript（读取和将宽度应用于元素）或使用最大宽度：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>

欢迎任何建议。

Answer 1

首先，从HTML中获取样式；这些属于CSS。

然后，我认为您可以做的是将DIV的位置设置为“相对”，但将其宽度留在自动上，并将其溢出到“隐藏”。隐藏的设置应迫使其足够大，以适应其所有子元素。

标题，然后将其设置为位置：自动和底部：0，左：0，宽度：100％。

那应该完成您想要的东西。

Answer 2

您可以将标题Div的宽度设置为父母的一部分。

也就是说，如果父母的宽度为（x）px宽（由于内部的图像导致了它的宽度），则可以将字幕框宽度设置为某个％（宽度：100％；也许）。