使用CSS将图像彼此相邻[重复]答案

【问题标题】：Put images next to each other using CSS [duplicate]使用CSS将图像彼此相邻[重复]
【发布时间】：2022-01-07 22:51:28
【问题描述】：

我目前正在执行一项任务，但遇到了一些问题。我正在尝试使用 CSS 将图像彼此相邻。但这似乎不起作用。我正在使用语义 HTML，这意味着对于两个图像，我正在使用 <figure> 标记。我将展示我拥有的代码示例：

.blitz {
  height: 200px;
  width: 300px;
  float: left;
}

figcaption {
  font-family: Helvetica;
  font-size: 22px;
  color: gray;
}

.rum {
  height: 200px;
  width: 300px;
}

<figure>
  <img class="blitz" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Berry Blitz">
  <figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
<figure>
  <img class="rum" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum">
  <figcaption>Spiced Rum Teat</figcaption>
</figure>

【问题讨论】：

标签： html css

【解决方案1】：

将figure 元素包装在div 中，并将其设置为显示为flex。见下文：

div {
  display:flex;
}
img {
  max-width:200px;
}

<div>
  <figure>
    <img class= "blitz" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="Berry Blitz">
    <figcaption>Fall Berry Blitz Tea</figcaption>
  </figure>
  <figure>
    <img class="rum" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" alt="Spiced Rum">
    <figcaption>Spiced Rum Teat</figcaption>
  </figure>
</div>

【讨论】：