如何在ReactJS中实现多张图片并排布局显示？

你需要给包裹图片的ImgWrap容器添加Flex布局相关样式即可实现并排效果，以下是可直接复用的代码：

样式代码（适配你当前的自定义组件写法，以styled-components为例） #

const ImgWrap = styled.div`
  /* 核心并排实现属性 */
  display: flex;
  /* 控制图片之间的间距，可自行调整数值 */
  gap: 16px;
  width: 100%;
  align-items: center;
  /* 对齐方式可选：flex-start/center/space-between等，按需调整 */
  justify-content: flex-start;

  /* 控制每个带链接的图片容器宽度 */
  a {
    flex-shrink: 0;
    /* 三个图片并排的话单张占比约30%，也可写固定宽度如120px */
    width: 30%;
  }

  /* 保证图片自适应容器大小不变形 */
  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
`

常见问题排查 #

• 如果出现图片折行，检查外层Column1、TextWrapper组件的宽度是否足够，是否有内边距挤压了内部可用空间
• 如果需要统一图片高度，给img标签添加固定高度属性即可，例如height: 120px
• 如果需要兼容低版本浏览器不支持gap属性，可将gap替换为给a标签加margin-right: 16px，再单独给最后一个a标签加margin-right: 0

内容的提问来源于stack exchange，提问作者ColliePixels