Question

我正在创建一个网页。但我脑子里有些东西，但无法在HTML / CSS中重现它。

我有一个图像和一个figcaption。两者都在数字标签中。我希望figure标签与图像的大小相同。但是，figcaption不能比图像大，所以文本应该被包裹。

这是html代码：

<figure>
    <img src="img.gif" alt="Logo" />
    <figcaption>Some random text in a random figcaption</figcaption>
</figure>

CSS代码：

figure {
    display: inline-block;
    padding: 15px;
    background-color: #C7C7CC;
}

figure > figcaption {
    padding-top: 10px;
    font-size: 1.2em;
}

结果屏幕截图：http://gyazo.com/b0b67b5869689c5e9ca40f26d72ede1f

但我希望figcaption元素不要大于img元素。

我知道我可以为每个图像和figcaption创建一个id来设置宽度等于图像。但我希望能够使用上面的HTML代码块添加更多图像，而css应该只是做神奇的事情。我想我可以用javascript修复它。但是我想知道CSS是否可行，如果是这样，我该怎么做。

Answer 1

我做了一个非常快速的研究，发现适用于display: table的{{1}}可能是解决方案。

我尝试使用更简单的CSS，例如：

figure

看到这个小提琴：http://jsfiddle.net/dh5x229p/2/

CSS块宽度不大于前一个块

1 个答案: