将文本限制为CSS中兄弟图像/自动宽度的宽度
题
我基本上是在尝试创建“数字”的版本。元素(即将出现在HTML5中),我在其下面有一个简短描述的图像。
但是,我想将整个元素的宽度限制为图像的宽度,因此文本不会比图像宽(如果需要,可以包装到多行)。
基本HTML:
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
我非常精通CSS,但我没有想到任何纯CSS解决方案,没有在 div
style =&quot; width:100px&quot; >匹配图像宽度。
更新:经过一番搜索和思考后,最好的方法似乎是在div上使用内联宽度。我会在图像上保留width属性,以防我希望div比图像宽一点(例如,为了容纳更长的标题)。
这种方法也意味着我可以将两个图像并排放在下面的标题中。如果我有一组相同大小的图像,我当然可以为每个 div
添加一个额外的样式。
感谢所有回答的人!
解决方案
<强>样式表强>
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
注意:启用换行只删除最后一条css行
<强> HTML 强>
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
我已经在Chrome,Firefox和IE7中查看了它,这三款产品看起来都不错。我意识到这有div的宽度而不是img,但至少你只需要在一个地方设置宽度。如果没有使用css表达式(仅限IE),我看不到将外部divs宽度设置为第一个子元素宽度的方法。
其他提示
这也可以使用'display:table-caption'
来完成标题,如下所示:
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
样式表
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
此块也可以浮动在其他文本的右侧。我在IE8 +中测试了这个。这是一个JSBin示例: http://jsbin.com/xiyevovelixu/1
要设置宽度以自动匹配图像,您可以使用
.figure {
display: table;
width: 1px;
}
这使得div的行为类似于表(Internet Explorer中不支持)。或者您可以使用表而不是div。我认为没有其他方法可以自动设置宽度。
编辑:最简单的方法是忘记自动宽度并手动设置。如果确实需要,您可以使用JavaScript或表格。在这种情况下,使用表并不是那么难看,因为您正在解决HTML版本的限制。在服务器端脚本的情况下,您还可以在生成页面时设置宽度。
我遇到了同样的问题,在阅读了这个之后决定了在周围元素上使用内联样式。似乎比使用表格更好的解决方案。
您可以为所有其他浏览器使用 display:table
解决方案,并且 CSS行为。