I fetch data from API and I would to display data side by side. this data contain images and text. and when i use display flex but nothing change. so any help will be great
my html code:
<!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>
my CSS code:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contain img{
width:20rem;
display:flex;
border: 1px solid fuchsia;
border-radius: 10px;
}
JavaScript code:
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()
Put flex on row(parent) and not in image or 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;
}