如何连续插入5张图片

Question

我有5张图片：

图1：https://www.url.se/1
图二：https://www.url.se/2
图3：https://www.url.se/3
图4：https://www.url.se/4
图5：https://www.url.se/5

每张图片的尺寸为：

图 1：70x40
图二：80x42
图 3：90x44
图 4: 100x46
图 5: 120x48

我想将这些图片并排插入一行。我还希望能够调整 CSS 中这些图片之间的距离，以及顶部和底部边框。

如何创建 div class 并粘贴此代码以在页面上显示这些图片？另外 CSS 如何寻找这个 div class 我可以在其中调整图像之间的距离以及顶部和底部边框的距离

Answer 1

您可以使用display: inline or float: left

显示：内联

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  width: 100%;
}
img{display: inline; margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

浮动：左

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  width: 100%;
}
img{float: left; margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

如果你想让它居中，你需要在父标签上添加text-align: center

*{box-sizing: bortder-box}  /*lang-css*/

figure{
  text-align: center;
  width: 100%;
}
img{margin: 0 10px; border-top: 2px solid red; border-bottom: 4px solid green}
img:first-child{width: 70px; height: 40px}
img:nth-child(2){width: 80px; height: 42px}
img:nth-child(3){width: 90px; height: 44px}
img:nth-child(4){width: 100px; height: 46px}
img:last-child{width: 120px; height: 48px}

<figure> <!--lang-html-->
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
  <img src=https://pbs.twimg.com/media/B3bbgs9CMAA5Cwi.jpg />
</figure>

如何连续插入5张图片

How to insert 5 pictures next to eachother in a row

html

css

image