CSS图片重叠问题求助：如何实现图片并排且间距5em

问题根源 #

1. 类名冲突：包裹图片的div和图片本身共用techImg类，导致父div被错误加上绝对定位和宽高样式，直接打乱布局逻辑。
2. 绝对定位导致重叠：图片设置position: absolute后脱离文档流，全部定位到父容器左上角，自然出现重叠。
3. Grid布局未生效：父容器声明了display: grid，但内部元素因绝对定位脱离文档流，Grid无法控制其排列。

修正后的代码 #

HTML

<div class="techStackContainer02">
    <div class="techImgWrapper">
       <img class="techImg" src="client image.svg" alt="client">
       <img class="techImg" src="server image.svg" alt="server">
       <img class="techImg" src="database.svg" alt="database">
    </div>
</div>

CSS

.techStackContainer02 {
    max-width: 100%;
    position: relative;
    width: auto;
}

.techImgWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 固定3列并排 */
    gap: 5em; /* 图片间距5em */
    height: 15vh;
}

.techImg {
    height: 100%;
    width: auto; /* 保持图片原始比例 */
    object-fit: contain; /* 确保图片完整显示不拉伸 */
}

关键调整说明 #

• 给包裹图片的div单独命名techImgWrapper，避免和图片类名冲突，让Grid布局正确作用在图片容器上。
• 移除图片的position: absolute，让图片回到文档流，由Grid控制排列逻辑。
• 用grid-template-columns: repeat(3, 1fr)实现固定3列并排，若需要自适应换行，可替换为repeat(auto-fit, minmax(120px, 1fr))。
• 调整图片宽高属性，配合object-fit: contain保证图片比例正常，避免变形溢出。

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