Figcaption不比图像宽

Question

我有一个问题,figcaption它比它宽img,因此伸出它的右边.我硬编码了width标题并且它可以工作,但仅适用于相同宽度的图像.

HTML

<figure>
    <img src="http://i.imgur.com/tVeUqlH.jpg"/>
        <figcaption>Vader enjoying the beach.</figcaption>
</figure>

CSS

figure {
    border: 1px solid black;
    display: inline-block;
    padding: 3px;
    margin: 10px;
}
figure img {
    vertical-align: top;
}
figcaption {
    text-align: center;
    border: 1px dotted blue;
    width: 120px;
}

的jsfiddle

Answer 1

你可以用display: table-caption;.

.imagecaption {
    padding: 3px;
    margin: 10px;
    float: left;
    border: 1px solid black;
}
figure {
    display: table;
    margin: 0px;

}

figure img {
    display: block;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: center;
    border: 1px dotted blue;
}

<div class="imagecaption">
  <figure>
    <img src="http://i.imgur.com/tVeUqlH.jpg"/>
    <figcaption>Vader enjoying the beach.</figcaption>
  </figure>
</div>

<div class="imagecaption">
  <figure>
    <img src="http://i.imgur.com/tVeUqlH.jpg"/>
    <figcaption>Vader enjoying the beach.</figcaption>
  </figure>
</div>