如何使我的< figcaption>匹配< img>的宽度。在其“图”内。标签？ [英] How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

问题描述

说，我得到这个代码：

<figure>
 <img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
 <figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>

如果我不使用任何CSS，figcaption将展开图元素的宽度超过200px。如何防止这种情况？

If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?

我知道我可以通过指定图形元素的宽度（<

I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.

推荐答案

这会将 figcaption 与 img ：

This will place the figcaption side by side with the img:

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

这里有一个例子。但是我不完全清楚你想要实现什么 - 你在问题中说，你希望图保持在200px宽度，但然后你评论你希望 figcaption 出现在右侧，这将使图更宽。如果所有你想要的是 figcaption 被限制为图像的宽度，这应该工作：

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}

这篇关于如何使我的< figcaption>匹配< img>的宽度。在其“图”内。标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！