Afficher chaque 3 articles dans une ligne

abirgl Messages postés 127 Date d'inscription   Statut Membre Dernière intervention   -  
 firewalk -
Bonjour,
Je souhaite afficher les articles de ma base de données dans ma page web , j'ai téléchargé un template qui affiche sur chaque ligne 3 articles , j'ai pas trouvé comment faire pour afficher 3 articles par ligne :
je vous montre le code : 

<?php
$sql_produit="select CArticle, LibArticle from Article where CFamille='$codeFamilleArticle'";
$stmt_produit=sqlsrv_query($conn,$sql_produit );
while($rslt_produit=sqlsrv_fetch_array($stmt_produit, SQLSRV_FETCH_NUMERIC))
{
  //var_dump($rslt_produit);
?>
<?php
}
?>
<div class="section group">
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g11.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g1.jpg" alt="">
<p>
Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
 </div>
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g22.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g2.jpg" alt="">
<p>
Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
 <div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g33.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g3.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
</div>
<div class="section group">
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g99.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g9.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
<div class="col_1_of_about-box span_1_of_about-box">
						  	    <div id="nivo-lightbox-demo"> <p> <a href="images/g77.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g7.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
   </div>
 <div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g88.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g8.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
<div class="clear"></div> 
</div>
A voir également:

2 réponses

Réponse 1 / 2
forum92 Messages postés 220 Date d'inscription   Statut Membre Dernière intervention   133
 
Bonjour, 
<?php 
	//lire les articles  et les ranger dans un tableau
	foreach ( $mesArticles as $article ){
		$tab[] = $article ; 
	}	
		// count le nb d'articles
		$nbDeLignes = count ($mesArticles)/3;
		// afficher les lignes d'articles
		$numeroArticle = 0;
		
		for( $i = 0 ; $i < $nbDeLignes ; $i++){
			//une ligne
			echo '<div id="enLigne">
						<div> '.$tab[$numeroArticle].' </div>
						<div> '.$tab[$numeroArticle].' </div>
						<div> '.$tab[$numeroArticle].' </div>
				  </div>';			
		}
		?>

code CSS : 
#enLigne{
	display : inline;
}
0
Réponse 2 / 2
firewalk
 
Salut,

euh il n'y a aucun moyen de faire tenir un texte sur une ligne en HTML. ET TANT MIEUX!!!

Un site Internet s'adapte à l'utilisateur, la plupart des sites sont consultés sur mobile(largement plus que la moitié des utilisateurs) ce qui implique écran et texte sur un petit écran.

Donc pour avoir 3 articles(?) qui tiennent sur une ligne il faudrait qu'il fasse moins de 3 syllabes chacun.

Sinon forum92 je vous invite à regarder la notice de display:inline; en CSS(sur le site du W3C) plutôt que de dire des bêtises :p

Vous pourrez voir que le style/comportement inline l'est pour le container et non son contenu, c'est d'ailleurs le comportement par défaut

Donc la bonne réponse est de faire une mise en page correcte (dont tenant compte de tout les affichages possibles) ou bien de faire quelque chose d'adaptative(plusieurs affichage selon les dimensions, voir media queries pour le CSS même si ce n'est pas le plus simple, un balise 'p'(paragraph) sans aucun CSS se comportera correctement pour ce que vous voulez).
Bien qu'il soit possible d'utiliser un texte avec formatage(via 'pre') je vous le déconseille toutefois.
0
firewalk
 
enfin plutôt que le css bidon de forum92(au fait évites aussi les div qui ne servent pas à écrire du contenu de façon sémantique et sont donc à relégué dans le passé du web) vous pouvez faire ceci:

p.maclasse{
width:100%;
}
Ce qui donnera au container de texte 100% de la taille qu'il peut prendre(donc le max).
0

Discussions similaires

Ca veut dire quoi :3
Moi -
Adraen -

3 réponses
Que veut dire "correspondant occupé" lors d'un appel ?
veroaaa -
Pat -

10 réponses
Signification de :3
blanchecanelle -
Adraen -

6 réponses
signification "<3" dans un sms
lecogno -
Utilisateur anonyme -

3 réponses
Afficher toutes les lignes masquées excel
livlarsen -
Mehdiiii -

27 réponses