html – 将文本限制为CSS中同级图像自动宽度的宽度

概述我本质上是试图创建一个“figure”元素的版本(即将在HTML5中)，这样我就可以看到下面的简短描述。 但是，我想将整个元素的宽度限制为图像的宽度，因此文本不比图像宽(如果需要，可以包装到多行)。 基本HTML： <div class="figure"><img src="..." alt="..." width="..." height="..." /><br />A descriptio 我本质上是试图创建一个“figure”元素的版本(即将在HTML5中)，这样我就可以看到下面的简短描述。

但是，我想将整个元素的宽度限制为图像的宽度，因此文本不比图像宽(如果需要，可以包装到多行)。

基本HTML：

<div ><img src="..." alt="..." wIDth="..." height="..." /><br />A description for the image</div>

我精通CSS，但我不能想到任何纯CSS的解决方案，没有添加一个style =“wIDth：100px”到div匹配图像宽度。

更新：经过一番搜索和思考，最好的方法似乎是在div上使用内联宽度。我将保持图像上的wIDth属性，以防我的div比图像宽一些(例如，以容纳更长的标题)。

这种方法也意味着我可以并排放置两个图像，并带有下面的标题。如果我有一套相同大小的图像，我可以为每个div添加一个额外的风格。

感谢所有回答的人！

解决方法 样式表

div.figure img,div.figure div.caption {    wIDth: 100%;}div.figure div {    overflow: hIDden;    white-space: nowrap;}

注意：启用包装只是删除最后一个CSS线

HTML

<div  >    <img src="logo.png" alt="logo" />    <div >A description for the image</div></div>

我已经在Chrome，firefox和ie7中检查过，并且在这三个方面看起来都很好。我意识到这个div的宽度不是img，而是至少你只需要在一个地方设置宽度。没有使用CSS表达式(仅限IE)我看不到将外部div宽度设置为第一个子元素的宽度的方法。

总结

以上是内存溢出为你收集整理的html – 将文本限制为CSS中同级图像/自动宽度的宽度全部内容，希望文章能够帮你解决html – 将文本限制为CSS中同级图像/自动宽度的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。