css 让多张图片并排显示

发布时间 2023-12-15 17:37:13作者: 数据--熊
.container {
    display: flex;
    justify-content: space-between;
  }
  
  .img-wrapper {
    width: 30%;
  }
  
  .img-wrapper img {
    width: 100%;
    height: auto;
  }
首先,我们需要给图片所在的容器设置一个display:flex属性,这样三张图片就可以分别排列在左、中、右三个位置。而justify-content:space-between可以让它们之间有一定的间隔。
 
然后我们要给图片设置一个宽度为30%左右,这样三张图片就能并排展示了。最后设置img标签的width为100%,height为auto,即可让图片按照等比例缩放。
 
当然,这只是一种实现方式,根据具体需求还可以使用float浮动,或者grid网格布局等方式来实现三张图片的并排展示。