html - 在主图像下方居中放置 3 个图像

Question

好的，所以我不是开发人员，并且有一些 HTML 经验。我们是一家小公司，我的任务是创建一个 html 文件，其中包含 1 个主图像和下面的 3 个小图像。我主要在这里弄明白了:https://jsfiddle.net/cekjf79u/然而，下面的 3 张图片太大了，我需要它们在图片 1 上均匀分布。同样，我通过阅读此处的一些答案达到了这一点，并且可以使用更多的帮助来完成这个元素。先感谢您!

.container{text-align:center;}
.container img{
  display:inline-block;
  width:30%;
  margin:0 1% 0 1%;
  }

<img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000" width="50%" height="50%">
<br>

<div class="container">
  <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVG8&oid=00DF0000000Bq7x&lastMod=1507305292000" >


<img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGD&oid=00DF0000000Bq7x&lastMod=1507305314000">




  <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGI&oid=00DF0000000Bq7x&lastMod=1507305333000">

Answer 1

在下面的代码中，您可以添加许多小图像并且所有图像都将正确对齐。

HTML:

<div class="container">
  <img class="big-thumbnail" src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGN&oid=00DF0000000Bq7x&lastMod=1507305397000" alt="">
  <div class="small-thumbnails">
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVG8&oid=00DF0000000Bq7x&lastMod=1507305292000" alt="">
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGD&oid=00DF0000000Bq7x&lastMod=1507305314000" alt="">
    <img src="https://c.na43.content.force.com/servlet/servlet.ImageServer?id=0150G000007uVGI&oid=00DF0000000Bq7x&lastMod=1507305333000" alt="">
  </div>
</div>

CSS:

.container .big-thumbnail {
  width: 50%;
}
.container .small-thumbnails {
  width:50%;
  //text-align: center; // You can center all small images
}
.small-thumbnails img {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 1%;
} 

或者查看 jsfiddle

https://jsfiddle.net/cekjf79u/10/