css三个图片并排显示

在网页设计中，布局美观是非常重要的，而图片的排列也是布局的一部分。CSS可以帮助我们轻松地实现多张图片并排显示的效果。

/* 首先，设置图片容器的样式 */
.container {
  display: flex; /* 使用弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 然后，设置每个图片的尺寸和间距 */
img {
  width: 200px; /* 设置图片宽度 */
  height: 200px; /* 设置图片高度 */
  margin-right: 30px; /* 设置右侧间距 */
}

/* 最后，在HTML中添加图片容器和图片 */
<div class="container">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
</div> 

以上代码使用了flex弹性盒子布局，使图片自动排成一行，并且使容器内的图片在水平和垂直方向上均居中。同时，通过给每个图片设置固定的宽度、高度和间距，保证了图片排列的整齐。

以上就是CSS实现多张图片并排显示的方法，适用于多种场景，如相册、产品展示等。我们只需要简单的几行代码就可以实现这种效果，美化我们的网页。