相邻显示多张图片的提示和技巧答案

【问题标题】：Tips and Tricks for displaying multiple pictures next to each other相邻显示多张图片的提示和技巧
【发布时间】：2019-01-23 18:59:32
【问题描述】：

我想在一行中显示虚拟图像，如下所示：

由于我不太擅长 CSS，我想知道如何以适当的方式做到这一点？我拥有的图片都是静态服务的，这些都不必是动态的、滑动的或任何东西，只是响应式地显示和放大

感谢您的意见

尝试了绝对位置和相对位置，但到处都是奇怪的位置。我在这个项目中使用 Bootstrap 4

【问题讨论】：

请向我们展示您到目前为止所做的尝试。
如果你分享你的代码会很棒！

标签： css bootstrap-4 frontend

【解决方案1】：

你可以试试这个：

body {
  background: #20262E;
}

div {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

img {
  width: 24%;
  border-radius: 50%;
}

<div>
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
</div>

如果你想要带有图像的绿色勾号，请按照以下步骤操作：

body {
  background: #20262E;
}

#image-gallery {
  margin: 10px;
  padding: 10px;
  background: #ffffff;
}

.image-box{
  display: inline-block;
  position: relative;
  width: 24%;
}

img {
  width: 100%;
  border-radius: 50%;
}

.green-tick {
  position: absolute;
  bottom: 10%;
  right: 10%;
  border-radius: 50%;
  color: #ffffff;
  background: #00ff00;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" />

<div id="image-gallery">
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 1">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 2">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar 3">
    <i class="fa fa-check green-tick"></i>
  </div>
  <div class="image-box">
    <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar 4">
    <i class="fa fa-check green-tick"></i>
  </div>
</div>

【讨论】：