1

我需要自动缩小图像下方的文本包装宽度。

例如：

<figure>
    <img src="mypicture.jpg" />
    <figcaption>
        This is a long description.This is a long description.This is a long description.
    </figcaption>
</figure>

现在我想要一个borderaround imgand figcaption，因为我有很多不同宽度的图像。所以我想自动缩小figcaption宽度以适应图像的宽度。也就是说，如果我有一个宽度为 100 像素的图像，那么我figcaption也想要我的 100 像素。

你能告诉我我是否可以在没有 js 的情况下做到这一点，只使用纯 html 和 css 吗？

4

2 回答 2

1

它确实需要一些技巧。您可以将容器显示设置为table并给它一个小宽度。它将自动对齐其内容宽度（如表格）。

这是一个例子

于 2012-10-17T02:24:23.837 回答
0 
figure {
    display: table;
}
.page-content figure figcaption {
    display: table-caption;
    caption-side: bottom;
}

这完成了事情。如果我使用 css 指定固定图像，@Chris Lee 的答案是正确的。对于我的情况，我不想指定每个图像的宽度，因为它的数量很大并且它们的宽度是随机的。

顶级CSS对我很有用。

于 2012-10-18T07:33:56.440 回答