Obtengo datos de la API y quisiera mostrar los datos uno al lado del otro. estos datos contienen imágenes y texto. y cuando uso display flex pero nada cambia. asi que cualquier ayuda sera genial
mi codigo 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>mi código CSS:
*{ padding: 0; margin: 0; box-sizing: border-box; } #contain img{ width:20rem; display:flex; border: 1px solid fuchsia; border-radius: 10px; }Código 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()
Ponga flex en la fila (padre) y no en la imagen o el niño.
*{ padding: 0; margin: 0; box-sizing: border-box; } #contain { display:flex; } #contain img{ width:20rem; display:flex; border: 1px solid fuchsia; border-radius: 10px; }