Incapacité à afficher deux éléments HTML générés dynamiquemennt l'un à côté de l'autre.

Petit nouveau ! | 1 Messages

10 août 2020, 15:58

Bonjour.
Je cherche pour un projet PHP à afficher une série de plusieurs div et label l'un en face de l'autre suite à un changement de page.
En cherchant sur Internet, j'ai trouvé qu'il fallait utiliser la propriété CSS float:left pour réussir çà.

Mes éléments HTML sont générés dynamiquement dans un code PHP à partir de plusieurs echo comme ceci :

Code : Tout sélectionner

echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='patientsNIR'>"; echo "PatientsNIR"; echo "</label>"; echo "<div class='". $truc . "' name='patientsNIR'>" . $patientsNIR . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='medecin'>"; echo "Medecin"; echo "</label>"; echo "<div class='". $truc . "' name='medecin'>" . $medecin . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='typeEE'>"; echo "TypeEE"; echo "</label>"; echo "<div class='". $truc . "' name='typeEE'>" . $typeEE . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='session'>"; echo "Session"; echo "</label>"; echo "<div class='". $truc . "' name='session'>" . $session . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='dateEE'>"; echo "DateEE"; echo "</label>"; echo "<div class='". $truc . "' name='dateEE'>" . $dateEE . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='age'>"; echo "Age"; echo "</label>"; echo "<div class='". $truc . "' name='age'>" . $age . "</div>"; echo "</div>"; echo "<br />"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='idEE'>"; echo "IdEE"; echo "</label>"; echo "<div class='". $truc . "' name='idEE'>" . $idEE . "</div>"; echo "</div>"; echo "<br />"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='tailleCM'>"; echo "TailleCM"; echo "</label>"; echo "<div class='". $truc . "' name='tailleCM'>" . $tailleCM . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='poidsKG'>"; echo "PoidsKG"; echo "</label>"; echo "<div class='". $truc . "' name='poidsKG'>" . $poidsKG . "</div>"; echo "</div>"; echo "<br />"; echo "<div class='floata'>"; echo "<label class='etiquette' class='box' for='bmi'>"; echo "BMI"; echo "</label>"; echo "<div class='". $truc . "' name='bmi'>" . $bmi . "</div>"; echo "</div>";
La classe floata contient bien la propriété css :

.floata {

float:left;

}

et j'ai entouré les deux éléments avec un <div class="floata></div>.
Pourtant, à la fin, mon label et le div qui le suit sont affichés l'un en dessous de l'autre et non à côté.
J'ai essayé de mettre la propriété float:left dans une classe reliée à label et une autre fois dans une classe reliée au div,
mais çà ne semble pas fonctionner.

Je ne comprends pas comment utiliser cette propriété.

Si quelqu'un pouvait m'indiquer si j'ai oublié quelque-chose dans mon css ou dans mes echo PHP,
je vous remercie d'avance.

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 8568 Messages

10 août 2020, 20:10

Bonjour,

Ce n'est donc pas un problème de PHP mais de pur HTML, donc il faut déjà que tu réussisses à faire fonctionner un exemple simple de HTML de ce que tu veux faire pour bien comprendre le fonctionnement.
Et une fois que ce dernier aura été validé sur un exemple simple, tu peux commencer à le générer avec du PHP.

La doc de Mozilla est plutôt bien faite :
https://developer.mozilla.org/fr/docs/Web/CSS/float

Et voici un exemple fonctionnel que je viens de faire :
https://jsfiddle.net/xkpywfLb/

A toi de regarder le code HTML de ton appli et à repartir sur qqch de simple pour comprendre d'où vient le bug :-D
Quand tout le reste a échoué, lisez le mode d'emploi...