html - CSS:没有明确宽度和自动换行的嵌套元素

Question

我试图在没有明确了解图像宽度的情况下将标题放在图像下方。我希望标题扩展到整个图像宽度，而不是拉伸(stretch)父元素的宽度并换行。

我想避免使用 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>

欢迎提出任何建议。

Answer 1

首先，从 html 中获取样式；那些属于 CSS。

然后，我认为你可以做的是将 div 的位置设置为“相对”，但将其宽度保留为自动，并将其溢出保留为“隐藏”。隐藏设置应该强制它足够大以容纳所有子元素。

然后将标题设置为 position:auto 和 bottom:0, left:0, width:100%。

这应该可以满足您的需求。