Question

我有5张照片：

图1：https://www.url.se/1
图2：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
图2：80x42
图3：90x44
图4：100x46
图5：120x48

我想在一行中将这些图片彼此相邻插入。我也希望能够调整CSS中这些图片之间的距离，也可以调整顶部和底部边框。

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

Answer 1

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

display：inline

＆＃13;

*{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}

＆＃13;

<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>

＆＃13;

float：left

＆＃13;

*{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}

＆＃13;

<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>

＆＃13;

如果您希望它位于居中

text-align: center

＆＃13;

*{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}

＆＃13;

<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>

＆＃13;

如何连续插入5张图片

1 个答案: