CSS块宽度不大于前一个块-Java 学习之路

我正在创建一个网页 . 但我脑子里有些东西却无法在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是否可行，如果是这样的话，我该怎么办呢 .

1 回答

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

我尝试使用更简单的CSS，例如：
```
figure {
  display: table;
}

figcaption {
  padding-top: 15px;
  font-size: 16px;
  display: table-caption;
  caption-side: bottom;
}
```
看到这个小提琴：http://jsfiddle.net/dh5x229p/2/
回复于 2024-04-24T19:29:31+08:00

CSS块宽度不大于前一个块

1 回答

相关问题