CSS:无明确宽度和单词包裹的嵌套元素
题
我试图将标题放在图像下方,而无需明确了解图像的宽度。我希望标题扩展到完整的图像宽度,但不要拉伸父元素的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>
欢迎任何建议。
解决方案
首先,从HTML中获取样式;这些属于CSS。
然后,我认为您可以做的是将DIV的位置设置为“相对”,但将其宽度留在自动上,并将其溢出到“隐藏”。隐藏的设置应迫使其足够大,以适应其所有子元素。
标题,然后将其设置为位置:自动和底部:0,左:0,宽度:100%。
那应该完成您想要的东西。
其他提示
您可以将标题Div的宽度设置为父母的一部分。
也就是说,如果父母的宽度为(x)px宽(由于内部的图像导致了它的宽度),则可以将字幕框宽度设置为某个%(宽度:100%;也许)。
不隶属于 StackOverflow