[分享]css两张图片之间有一条线

当我们在网页中使用多张图片进行排版时，有时候需要用到一条分割线来区分不同的图片。在 CSS 中，我们可以使用 标签来实现这个效果。但是，通过 CSS 代码来实现比使用标签更加灵活方便。.imgcon...

当我们在网页中使用多张图片进行排版时，有时候需要用到一条分割线来区分不同的图片。在 CSS 中，我们可以使用 <hr> 标签来实现这个效果。但是，通过 CSS 代码来实现比使用标签更加灵活方便。

.img-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.img-container img {
  margin-right: 10px;
}

.img-container img:last-of-type {
  margin-right: 0;
}

.img-container:after {
  content: "";
  width: 1px;
  height: 50px;
  background-color: black;
  margin-right: -10px;
} 

首先，我们给图片容器（.img-container）设置了 display: flex; 属性，使其中的元素可以通过 flex 布局进行排列。同时，我们使用 justify-content: space-between; 和 align-items: center; 属性来让图片在容器中水平居中，并且在容器中间出现一个空白区域。

接着，我们给每个图片设置了 margin-right: 10px; 属性，使每个图片之间有一定的距离。同时，我们使用 img:last-of-type 属性来消除最后一张图片的右边距。

最后，我们使用 :after 伪类来在容器的右边添加一条分割线。我们设置了 content: ""; 来指定伪类显示内容为空，然后设置了 width: 1px; 和 height: 50px; 来指定分割线的宽度和高度。我们还对 background-color 属性进行了设置，来指定分割线的颜色。最后，我们使用 margin-right: -10px; 属性来让分割线和最后一张图片之间没有空隙。

通过以上 CSS 代码，我们可以很轻松地为图片之间添加一条分割线，使排版更加整齐美观。