html - 如何将文本放在预先存在的边框内

Question

我正在创建一个致敬页面，我在边框中有一个图像，但我还想在图像下方的边框内添加文本。

我试过将文本和图像放在同一个类 css 中并给它们相同的 id。

#image {
  max-width: 400px;
  border: 5px solid gray;
  padding: 50px;
}

.border {
  border: 5px solid gray;
}

<img id="image" class="border" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" <figcaption id="img-caption" class="border"><em><a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug</a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</em></figcaption>
</div>

我希望图像和图片在同一边框内，但它们不是。

Answer 1

您在各个元素上都有自己的类(class)。您需要为外部 div 提供类边框，并从图像本身中删除边框 css。

因为您要为单个元素提供边框类和/或边框样式。它出现在他们周围。

#image {
  max-width: 400px;
  padding: 50px;
}

.border {
  border: 5px solid gray;
}

<div class="border">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" />
  <figcaption id="img-caption">
    <em>
        <a href=https://en.wikipedia.org/wiki/Norman_Borlaug target="_blank"> Dr. Norman Borlaug
        </a>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.   
    </em>
  </figcaption>
</div>