HTML 在图像底部添加扩展边框并在其上写入文本

Question

这是我的CSS。我想为每个图像添加扩展边框并在该空间中写入文本。我该怎么做？

.column {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0 4px;
}
.row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0 2px;
}


.column img {
        margin-top: 12px;
        vertical-align: middle;
        border: 2px solid;
}

这是我的 HTML。一切正常，我只想在底部的扩展边框中添加文本:

<div class="row">
  <div class="column">
    <img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();" style="width:100%">
    <img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg" style="width:100%">
  </div>
  <div class="column">
    <img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg" style="width:100%">
    <img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg" style="width:100%">
  </div>  
</div>

Answer 1

HTML5 提出了一个 <figure> 用于此目的的 HTML 标记:

figure {
  width: 25vw
}

img {
  width: 100%
}

<figure>
  <img src="https://html.com/wp-content/uploads/flamingo.jpg" alt="flamingo">
  <figcaption><i>fig. 1</i> A pink flamingo.</figcaption>
</figure>

所以你会得到这样的结果:

.column {
  -ms-flex: 50%;
  /* IE 10 */
  flex-basis: 45%;
  padding: 0 4px;
}

.row {
  display: -ms-flexbox;
  /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap;
  /* IE 10 */
  flex-wrap: wrap;
  padding: 0 2px;
}

.column figure {
  margin-top: 12px;
  padding: 10px;
  vertical-align: middle;
  border: 2px solid;
}

img {
  width: 100%
}

<div class="row">
  <div class="column">
    <figure><img src="https://i-h1.pinimg.com/736x/87/e9/38/87e938ab69a614cddb14a6866b2478d0.jpg" onclick="app();">
      <figcaption><i>fig. 1</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/564x/32/03/4f/32034f6da33f2932d88c6d6db7fa117a.jpg">
      <figcaption><i>fig. 2</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/96/e6/54/96e654398c4b2cd7afc03410d636dbea.jpg">
      <figcaption><i>fig. 3</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/4e/78/48/4e7848375fa721845f4986006229555a.jpg">
      <figcaption><i>fig. 4</i> A picture caption.</figcaption>
    </figure>
  </div>
  <div class="column">
    <figure><img src="https://i-h1.pinimg.com/736x/1a/b0/d4/1ab0d4ef04e3e789396ae744f626c68a.jpg">
      <figcaption><i>fig. 5</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/41/fd/31/41fd312937d0fd0e864d8fdd53f055ba.jpg">
      <figcaption><i>fig. 6</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/06/98/94/069894936419220407b4b11edfca833d.jpg">
      <figcaption><i>fig. 7</i> A picture caption.</figcaption>
    </figure>
    <figure><img src="https://i-h1.pinimg.com/736x/18/8b/bf/188bbfa47af6b445cf2a5a1869c90566.jpg">
      <figcaption><i>fig. 8</i> A picture caption.</figcaption>
    </figure>
  </div>
</div>