使用display:flex无法让API拉取的图文数据并排展示该如何解决

问题原因 #

• display:flex设置对象错误：flex是容器属性，需要加在要排列元素的直接父级上，你给子元素img设置flex不会生效
• DOM结构不合理：动态生成的图片和名称没有分组包裹，无法实现每组图文并排的效果
• JS拼接HTML时未处理map返回的数组，会在页面上渲染出多余的逗号分隔符

修复代码 #

CSS修改 #

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* 父容器设置flex，实现多组条目自动换行排列 */
#contain {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 20px;
}

/* 每组演员条目单独设置flex，实现单组内图文并排 */
.actor-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 10px;
}

#contain img{
    width:12rem;
    border: 1px solid fuchsia;
    border-radius: 10px;
}

JavaScript修改 #

async function getMyData(){
     const response = await fetch(api)
     const myData = await response.json()
     const contain = document.querySelector('#contain');
     // 给每组图文包裹独立容器，map后加join('')消除多余逗号
     contain.innerHTML = myData.map(actor =>`
        <div class="actor-card">
            <img src='${actor.img}' alt='${actor.name}'>
            <h3>${actor.name}</h3>
        </div>
     `).join('')
}

getMyData()

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