[Résolu] Comment justifier des DIV à l'intérieur d'une DIV ?

Bonjour à tous,

J'arrive un peu à mes limites de connaissances CSS ... J'aimerais aligner 3 ou 4 "div" horizontalement en ayant la première la plus à gauche, la dernière la plus à droite, et celles du milieu réparties uniformément ...

Grosso modo, sur un site, j'ai une div qui représente une zone de widget, donc à une largeur bien définie, qui est le conteneur. Dedans je veux placer sur une ligne 3 ou 4 prévisions météo comprenant une ligne de texte (le jour) une image en dessous (l'icône météo) et une ligne de text en dessous (la température). Et je voudrais que cette ligne de prévisions utilise toute la largeur disponible et que ces prévisions soient justifiées.

J'ai tenté ça, sans succès :

<div style="text-align:justify;">
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
</div>

Quelqu'un pourrait m'aider à accomplir ça ?

Merci d'avance !

tu pourrait utiliser display:flex; , mais faut attendre encore un peu.

Pour le moment, je peut te proposer une logique qui se base sur le comportement de text-align-justify qui ne justify jamais la dernière ligne , il suffit d'en remplir une avec une boite en ligne.
http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites

En raccourci ça donne ça :

<div style="text-align:justify;width:100%">
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
	<div style="display:inline-block;text-align:center;">
		<span style="font-size:100%;">Dim</span><br />
		<img src="30.png" width="31" title="Aujourd´hui : Nuageux"><br />
		<span style="font-size:100%;">18° / 4°</span>
	</div>
	<div style="display:inline-block;height:1px;width:100%;"></div>
</div>

(l'avant derniere ligne en sus, pas plus magique que ça )
Bon c'est pas propre hein;), tu met les style dehors et remplace les div par les balises qui auront du sens.
attention aussi a l'heritage des style. si width:100%; de rien du tout dns le parent , ça fait zero.

++

Je passe en résolu !