J'essaie d'afficher les informations de la base de données en utilisant PHP et CSS. Cependant, lorsque je stylise les informations, elles sont affichées verticalement, l'une après l'autre. Je souhaite afficher les informations dans des conteneurs, côte à côte.
Lorsque j'ajoute le code Toute aide serait grandement appréciée! CSS } à mon premier div, il affiche les conteneurs vraiment petits et partout sur ma page Web. J'ai supprimé le w3-third et il revient à l'affichage vertical. J'ai créé un design et appelé l'ID pour apporter la modification au div, bien que rien n'ait encore changé. </style>
$con=new mysqli("localhost:3308","root","","fypdatabase");
$st=$con->prepare("select * from personal_trainer where specialty=?");
$st->bind_param("s", $cat);
$st->execute();
$rs=$st->get_result();
while($row=$rs->fetch_assoc())
{
echo '<div id="design" class="w3-row-padding" style="margin-top:64px">
<div id="design" class="w3-col l3 m6 w3-margin-bottom">
<div id="design" class="w3-card">
<img src="images/'.$row["image"].'" style="width:100%"/>
<div class="w3-container">
<p><h3>'.$row["name"].'</h3></p>
<p>'.$row["location"].'</p>
<p>'.$row["fee"].' EUR</p>
<p>'.$row["numberTWeeks"].' Weeks</p>
<p>'.$row["email"].'</p>
<button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
</div></div></div>
</div>';
}
?>
<style>
design {
display:flex;
flex-wrap:wrap;
3 Réponses :
Avez-vous essayé d'utiliser flexbox ?
<div class="w3-col l3 m6 w3-margin-bottom">
<div class="w3-card">
<img src="images/'.$row["image"].'" style="width:100%"/>
<div class="w3-container" style="display:flex;flex-wrap:wrap;">
<p><h3>'.$row["name"].'</h3></p>
<p>'.$row["location"].'</p>
<p>'.$row["fee"].' EUR</p>
<p>'.$row["numberTWeeks"].' Weeks</p>
<p>'.$row["email"].'</p>
<button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
</div>
</div>
</div>';
Salut Arthur merci pour ta réponse! Malheureusement, cela n'a pas fonctionné! C'est toujours au format vertical.
placez-vous le
style = "display: flex; flex-wrap: wrap;" en dehors de la boucle?
@Sebastian oui je l'ai mis en première ligne! Des suggestions à changer?
Salut Daran, Désolé, je n'ai pas lu votre code correctement. OUI l'idée est de créer un conteneur div avec le style "display: flex". Tous vos divs enfants doivent être alignés horizontalement.
Aucun problème du tout! J'ai donc créé un élément de css appelé «design» et mis ces deux éléments, puis j'ai appelé l'ID dans le div mais rien n'a changé. Désolé mon css est assez pauvre ive mis à jour la question!
Cela ne fonctionnera pas comme ça. Vous devez d'abord spécifier comment votre style est référencé: #design {...} pointant vers un élément dont l'id est "design" (votre cas) .design {...} pour les éléments dont la classe est "design" Alors vous seulement besoin d'appliquer display: flex à l'élément parent, pas aux enfants.
ce bootstrap a fonctionné mais pas php guy vérifiez ceci
<div class="row">
<div class="col-lg-12">
<div class="form-horizontal">
<div class="form-group">
<div class="col-lg-4">
`your left hand side contents here`
</div>
<div class="col-lg-7 col-lg-offset-1">
`your right hand side contents here`
</div>
</div>
</div>
</div>
</div>
</div>
Merci c'est super! Cependant, il s'affiche toujours verticalement, car ce qui dans mon instruction echo parcourt ma base de données, il ne s'affiche pas horizontalement dans cet exemple!
vous pouvez utiliser le span -Tag à la place, c'est presque la même chose qu'un div mais il s'affiche côte à côte avec d'autres balises, tandis que div - Les conteneurs sont conçus comme un bloc et seront affichés verticalement.
Je recommande d'utiliser des tableaux, votre code pourrait ressembler à ceci:
<?php
$con=new mysqli("localhost:3308","root","","fypdatabase");
$st=$con->prepare("select * from personal_trainer where specialty=?");
$st->bind_param("s", $cat);
$st->execute();
$rs=$st->get_result();
echo '<table class="table">
<col style="width:100px;"><!--first column-->
<col style="width:;"><!--second column--><!--if you leave value empty, its responsive-->
<col style="width:100px;"><!--third column-->
<tr><!--table headers-->
<th>image</th>
<th>name</th>
<th>location</th>
<th>fee</th>
<th>numberTWeeks</th>
<th>email</th>
<th></th>
</tr>
';
while($row=$rs->fetch_assoc())
{
echo '
<tr>
<td><img src="images/'.$row["image"].'" style="width:100%"/></td>
<td><p><h3>'.$row["name"].'</h3></p></td>
<td><p>'.$row["location"].'</p></td>
<td><p>'.$row["fee"].' EUR</p></td>
<td><p>'.$row["numberTWeeks"].' Weeks</p></td>
<td><p>'.$row["email"].'</p></td>
<td><button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button></td>
</tr>';
}
echo '</table>';
?>
Salut Maxim, c'est super! Je l'ai changé à l'origine du format de table, j'essaie de travailler sur la conception maintenant, c'est pourquoi j'utilise ces bootstraps et divs! Je ne peux juste pas faire couler la sortie horizontalement