HTML中的照片和文本[重复]答案

【问题标题】：photo and text in HTML [duplicate]HTML中的照片和文本[重复]
【发布时间】：2021-06-07 15:12:31
【问题描述】：

我想在照片旁边放一些文字，我希望这些文字在图像下方流动。我使用了 figure 标签和 figcaption 标签，但它不起作用。

<figure>
  <img class="row2" src="http://placekitten.com/150/150">
  <figcaption class="text">Email filtering is the processing of email to organize it according to specified criteria. </figcaption>
</figure>

【问题讨论】：

文字在图片下方。
您是否希望文本从旁边流向底部？还是就在图片下方？
我希望它从旁边流到底部

标签： html css photo figure

【解决方案1】：

float 会将您的文字放在旁边和下方。

img {
  float: left;
}

<!DOCTYPE html>
<html lang="">

<head>
  <title>Test</title>
</head>

<body>
  <figure>
    <img class="row2" src="http://placekitten.com/150/150">
    <figcaption class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
      a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like</figcaption>
  </figure>
</body>

</html>

【讨论】：

只有在为下一个元素添加了 clearfix 时，float 才会起作用。

【解决方案2】：

使用 flexbox 以获得最佳效果。

如果您单击代码 sn-p 中的“整页”，您将看到并排显示图像 + 文本。

figure {
  display: flex;
  flex-flow: row wrap;
}
img.row2,
figcaption.text {
  display: block;
  margin: 0;
  box-sizing: border-box;
}
img.row2 {
  width: 40%;
  height: auto;
  border: 0;
}
figcaption.text {
  width: 60%;
  padding: 20px;
}
/* small devices */
@media (max-width: 767px) {
  img.row2,
  figcaption.text {
    width: 100%;
  }
}

<!-- in head section -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<figure>
  <img class="row2" src="http://placekitten.com/150/150">
  <figcaption class="text">Email filtering is the processing of email to organize it according to specified criteria. </figcaption>
</figure>

【讨论】：

【解决方案3】：

如果您只想让您的标题与图片大小相同，并且在图片下方。给figure一个宽度

figure{
  width: 300px;
}
img{
  max-width: 100%;
  display: block;
}

<figure>
  <img class="row2" src="http://placekitten.com/450/450">
  <figcaption class="text">Email filtering is the processing of email to organize it according to specified criteria. </figcaption>
</figure>

【讨论】：

inline-block 显示一个额外的间隙（一个空格）。