时间戳

首页 > 解决方案 > 显示 flex 不能处理我的数据我想并排显示数据

javascript - 显示 flex 不能处理我的数据我想并排显示数据

问题描述

我从 API 获取数据，然后并排显示数据。此数据包含图像和文本。当我使用 display flex 但没有任何改变时。所以任何帮助都会很棒

我的html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="title">
        <h1>Api Data</h1>
    </div>
    <div class="contanier">

        <div id="contain">
           
        </div>
       </div>
    <script src="script.js"></script>
</body>
</html>

我的 CSS 代码：

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

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

JavaScript 代码：

async function getMyData(){
     const response = await fetch(api)
     const myData = await response.json()
    //  printData(myData)

     console.log(myData)
    const Name = document.querySelector('#contain');
    Name.innerHTML = 
    `   
    ${myData.map(actor =>`<img src='${actor.img}'>` + `<h3>${actor.name}</h3>`)}
    ` 
    }

    

getMyData()

标签： javascripthtmlcssflexbox

解决方案

将 flex 放在 row(parent) 上而不是 image 或 child。

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

#contain {
    display:flex;
}

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

推荐阅读