css – 如何使我的匹配的宽度是其标签内部的宽度？

说，我得到这个代码：

<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。如何防止这种情况？

我知道我可以通过指定图形元素的宽度(< figure style =“width：200px;”>)来强制在figcaption内的文本，但我真的不想使用它为每个图像。

解决方法

这将把figcaption与img并排：

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

Here’s an example.然而，我不是完全清楚你想要实现 – 你说在问题，你想要的数字保持在200px宽度，但然后你评论，你想让figcaption出现在右边，这将使图更宽。如果你想要的是图像被限制为图像的宽度，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;
}