28220 sujets

CSS et mise en forme, CSS3

Alignement a la ligne des div

bonjour,

j'ai un soucis d'alignement de mes div : il s'agit d'images + texte heneres dynamiquement(php).
je veux afficher 3 div par ligne.

		<table id="Business">
		<tr>
			<td>		<h1>Gas station life</h1>
			
			<div class="Image">
				texte1
			</div>
			<div class="Image">
				text2 test2 test2 test2
			</div>

			<div class="Image">
				image + text3
			</div>
			<div class="Image">
				image + text4
			</div>
			<div class="Image">
				image + text5
			</div>

			<div class="Image">
				image + texte6
			</div>
			<div class="Image">
					image + texte7
			</div>
			<div class="Image">
					image + texte8
			</div>
			<h1>Services</h1>

			
			<div class="Image">
					image + texte1
			</div>
			<hr />
</td></tr></table>


mon css :

#Business
	{ width: 560px; margin: 10px auto; padding: 5px;  	}
#Business img
	{ border: 0; }
#Business .Image
	{
	width: 160px;
	background-color:#fff;
	float: left;
	padding-right: 8px;
	padding-left: 8px;
	display: block;
}
hr{ clear: both; visibility:hidden;}



le soucis est que le div num4 ne revient pas forcement à la ligne(en fonction de la taille des precedents) : il s'affiche en dessous du 3 si le 2 st plus long.

avez vous une idee ? (j'ai essaye avec un hr avec clear: borh, mais ca donne rien)

merci
Pour commencer, je ne vois pas trop l'utilité du tableau qui englobe le tout, surtout si c'est pour faire un tableau à une seule cellule Smiley rolleyes … mais passons.

Pour les blocs 1, 4, 7, etc., il faudrait un clear:left lui demandant de revenir à la ligne en dessous de tous les éléments flottants situés à gauche. Si c'est difficile à faire, on peut effectivement utiliser un hr en clear: both (quoique, un clear: left devrait suffire), mais dans ce cas il faut en placer un entre chaque groupe de trois images+texte.

Enfin, si on estime que les groupes de trois images+texte sont cohérents, on peut aussi envisager de les grouper dans des div (facile à générer en PHP avec une boucle).
merci pour ta réponse, j'ai effectue testé comme ça et ça marche.
mais mon probleme est que tout est génére de façon dynamique, un coup il y a 4 images, un autre 2 ou 9 ... Y a t il une façon de le faire automatique ? merci
miry a écrit :
merci pour ta réponse, j'ai effectue testé comme ça et ça marche.
mais mon probleme est que tout est génére de façon dynamique, un coup il y a 4 images, un autre 2 ou 9 ... Y a t il une façon de le faire automatique ? merci

Genre dans ta boucle PHP, faire une condition if ($i % 3 == 0) echo "class=\"clearleft\";, par exemple ($i étant le compteur de la boucle, qui commence à zéro, et $i modulo (%) 3 le reste de la division euclidienne de $i par 3) ?
Sujet clos
Aller à