在CSS中将文本限制为兄弟图像的宽度/自动宽度

小编典典

css

我本质上是在尝试创建一个“ figure”元素的版本（HTML5中即将推出），在该图像的下面有一个简短说明的图像。

但是，我想将整个元素的宽度限制为图像的宽度，以使文本不比图像宽（必要时可以换成多行）。

基本HTML：

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

我精通使用CSS，但我想不出任何纯CSS解决方案，而无需添加style="width:100px"到div相匹配的图像宽度。

更新
：经过一番搜索和思考，最好的方法似乎是在div上使用内联宽度。如果我希望div比图像宽一点（例如，容纳更长的标题），我将在图像上保留width属性。

这种方法还意味着我可以并排放置两个图像，并在下面添加标题。如果我有一组大小相同的图像，我当然可以为每个图像添加额外的样式div。

感谢所有回答！

阅读 333

2020-05-16

共1个答案

小编典典

样式表

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-
expressions（仅适用于IE），我看不到将外部div宽度设置为第一个子元素的宽度的方法。

2020-05-16