说，我得到这个代码：
- <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;
- }
