如何将两个图像与标题并排放置？

Question

我试着把两张图片并排放在朱庇特的标记上。我们可以使用html，但我无法将两个图像与标题并排放置。我尝试了here中的每一种选择，但都失败了。

<figure>
<img src='aaa.png' width="350" height="350" align="center"/>
    <figcaption align = "center"><b>Fig 2.5; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
<img src='bbb.png' width="350" height="350" align="center"/>
    <figcaption align = "center"><b>Fig 2.3; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>

Answer 1

，检查一下

​

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
    <figcaption>Fig.1 - Trulli</figcaption>
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
    <figcaption>Fig.2 - Puglia</figcaption>
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
  <figcaption>Fig.3 - Italy</figcaption>
</div>

​

Answer 2

​

figure{text-align: center; max-width: 40%; float:left; margin:0;padding: 10px;}
figure img{width: 100%;}

<figure>
<img src='aaa.png'/>
    <figcaption align = "center"><b>Fig 2.5; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>
<figure>
<img src='bbb.png'/>
    <figcaption align = "center"><b>Fig 2.3; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>

​

Answer 3

如果是，请使用Flex属性

<div class="outerlayer">
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</div

样式设置

.outerlayer{
display: flex;/* arranges both images side by side*/
column-gap: 10px; /* To give a gap between both*/
}