Question

说，我收到了这段代码：

<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中的文本换行，但我真的不想对每个图像使用它。

Answer 1

将此代码添加到<figure>和<figcaption> CSS-Attributes帮助我解决了同样的问题。此外，它还保留了图像和字幕的响应。

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }

添加display: table;设置阶段。
单独添加display: table-caption;将标题置于顶部图像，caption-side属性指定的位置 bottom，top的表格标题为默认值。

Answer 2

这会将figcaption与img：

并排放置

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

Here's an example。但是我并不完全清楚你想要实现的目标 - 你在问题中说你希望figure保持200px的宽度，但是你评论你希望figcaption出现向右，这将使figure更宽。如果您只想将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;
}

Answer 3

另一种解决方案：使用Intrinsic width

只需在width: min-content;元素

上设置figure即可

DEMO （IE除外）

figure {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

<figure>
  <img src=" http://placehold.it/200x150" 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>

NB： Browser Support is OK，但IE除外，they are considering implementing this

Answer 4

不幸的是，设置图的宽度而不是使用max-width: 100%意味着它不会在窄（移动）设备上缩小。也就是说，图像不会是responsive。我试图插入<br />来打破长字幕，但我不喜欢它。但这个模糊的CSS功能似乎对我有用：

figcaption { display: run-in; width: 150px }

这可以保持图像的响应性，即使标题不是。您可以选择自己的标题宽度。我还添加了margin: auto; text-align: center;来将标题置于移动设备的中心位置。

Answer 5

这真让我感到困扰，因为我想找到一个答案，以适应HTML5的升级，这将成功取代我显示图像和字幕的原始设置 - 一个有两行的表（如果没有可用的标题，则为一行）。

我的解决方案可能不适用于所有人，但到目前为止，它似乎在主流浏览器（O，FF，IE，S，C）中做得很好，并且在移动设备上做出响应：

figure {
border: 0px solid #000;
display: table;
width: 0;
}

这里的想法是figure被img的宽度推迟存在，因此不需要任何方向。

figure img {
display: block;
}

这用于摆脱img底部与figure底部之间无用的，难看的间隙。

figcaption {
text-align: left;
}

现在，这个数字已被推开，只允许img进入，figcaption文本只有有限的空间存在。此解决方案不需要text-align。

此解决方案与display: table-caption一样有效，但会将figcaption包含在可能需要设置的任何边框或背景值中。

如何使<figcaption>的宽度与<figure>标签内<img/>的宽度相匹配？</figure> </figcaption>

5 个答案:

另一种解决方案：使用Intrinsic width

DEMO （IE除外）