Bonjour;

Voila j 'ai récupéré mon tableau, j'ai 5 produits à l'intérieur du tableau (nom , description, prix et un bouton pour renvoyer vers la page produit). J'ai créer dans HTML 5 div pour les placer seulement tous mes produits sont dans la même div du coup impossible de les placés avec mon css. Ce que je souhaite c'est la photo puis en dessous le titre de l'objet, en dessous sa description et pour finir le prix.(voilà l'ordre des éléments) Si quelqu'un un peut m'aider se serait sympa.
Merci par avance.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="robots" content="index, follow">
		<meta name="description" content="La boutique Orinoco vends des appareils photos de qualité à prix très abordable">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="https://kit.fontawesome.com/cf7cad016f.js" crossorigin="anonymous"></script>
		<title>Orinoco -Accueil</title>
	</head>
	<body>
		<header>
			<img class="header__logo" src="images/logo.png" alt="logo Orinoco">
			<h1 class="header__h1">Bienvenue sur Orinoco</h1>
			<ul class="header__validation">
				<li><a class="header__validation_commande" href="confirmation_de_commande.html"></i>Commandes</a></li>
				<li><a class="header__validation_panier" href="panier.html"><i class="fas fa-shopping-cart"></i>&nbsp; Panier</a></li>
			</ul>
		</header>
		<main>
			<h2 class="main_h2">Trouvez votre appareil photo vintage</h2>
			<p class="main__text">
				Qui dit photographie dit forcément appareil photo... La gamme de produits présente sur le marché est vaste et 
				propose de nombreuses références.
				Chez Orinoco, vous obtiendrez des modèles à la pointe de la technologie.
			</p>
			<section id="produit">
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
				<div class="cameras"></div>
			</section>
		</main>
		<footer>
			<a class="text" href="#">À propose de nous</a>
			<a class="text" href="#">Contactez-nous</a>
		</footer>		
		<script src="essai.js"></script>
	</body>
</html>

mon code Javascript :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//section de mes divs
document.getElementsByClassName("cameras")
 
//requête
fetch('http://localhost:3000/api/cameras')
  .then(function(response){
    return response.json()
  }).then (function (data) {
    console.log(data)
    for(let i = 0; i <data.length; i++){
 
      //création de ma balise image
      let images = document.createElement("img");
      images.classList.add("images")
      images.textContent = data[i].imageUrl ;
      images.setAttribute('src', data[i].imageUrl);
      document.querySelector("div").appendChild(images);
 
      //création de mon nom de l'article
      let names = document.createElement("H2");
      names.textContent = data[i].name;
      document.querySelector("div").appendChild(names);
 
      //création de mon paragraphe: description
      let description = document.createElement("p");
      description.textContent = data[i].description;
      document.querySelector("div").appendChild(description);
 
 
 
      //création de l'emplacement prix
      let price = document.createElement("p");
      price.textContent = data[i].price/100 + "€";
      document.querySelector("div").appendChild(price);
 
      //création de mon bouton
      let button = document.createElement("div");
      button.classList.add("button_detail");
      button.innerHTML = `<a href=produit.html?id=${data._id}><button class="button_detail" type="button">Détails</button></a>`;
      document.querySelector("div").appendChild(button);
 
    }
  })