html - 图片描述的宽度

Question

我有一篇文章，包含一张带有描述的图片。描述不应长于图像。图像的宽度可能不同，所以我无法将类 .article-image 设置为固定宽度(这样可以解决问题)。

article {
  width: 600px;
  margin: 0 auto;
}

.leadtext {
  font-weight: 600;
  margin-bottom: 10px;
}

.article-image {
  float: left;
  margin: 0 10px 10px 0;
}

.article-image img {
  display: inline-block;
}

.article-image>div {
  font-size: 0.8em;
  font-style: italic;
}

<article>
  <h1>Headline</h1>
  <div class="leadtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</div>
  <div>
    <div class="article-image">
      <img src="https://placehold.it/100x100">
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr | &copy; author</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</article>

http://codepen.io/DaFunkyAlex/pen/mWMVdz

Answer 1

它叫<figure>与 <figurecaption>

您可以通过将图像放在 <figure> 中来为图像添加标题。标记并添加 <figcaption> ，然后可以包括 <p>标签等。<figure>标签用于分节内容。数字也可以用来显示代码片段以区别于其他内容。

/* Should you want to center the caption:
figure {
    display: inline-block;
}
figure img {
    vertical-align: top;
}
figure figcaption {
    text-align: center;
}*/

<figure>
  <img src="//i.stack.imgur.com/N7dX8.png" width="100px" height="100px" />
  <figcaption>A doge above a very long text with Lorem Ipsum</figcaption>
</figure>