[CSS 2.1] Alignement vertical de DIVs

kriekbellevue · 26/01/2012, 16h32

Bonjour à tous,

Je suis en train d'essayer d'améliorer un de mes script, mais bloc.
J'aimerais aligner des DIVs verticalement, mais de gauche à droite.

Voici un croquis de ce que j'ai à l'heure actuel :

Et voilà ce que j'aimerais avoir :

J'utilise le display inline-block. Mais (normal), il aligne les div à la même hauteur.

J'ai déjà vu cela (le nouveau profil facebook). D'où mon avis de faire pareil.

Quelqu'un voit comment faire ?

Merci d'avance,
Colin.

Bovino · 26/01/2012, 17h57

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
	<style>
		.conteneur{
			display: inline-block;
			width: 49%;
		}
		.left{
			float: left;
		}
		.right{
			float: right;
		}
	</style>
</head>
<body>
	<div class="conteneur left">
		<div style="height:200px;background-color:silver;"></div>
		<div style="height:100px;background-color:blue;"></div>
		<div style="height:250px;background-color:red;"></div>
	</div>
	<div class="conteneur right">
		<div style="height:300px;background-color:green;"></div>
		<div style="height:150px;background-color:gray;"></div>
		<div style="height:200px;background-color:yellow;"></div>
		<div style="height:50px;background-color:navy;"></div>
		<div style="height:100px;background-color:wheat;"></div>
	</div>
</body>
</html>

kriekbellevue · 26/01/2012, 18h50

J'ai oublié de préciser que les blocs étaient d'hauteur variable...
Le contenu n'est pas fixe.

Bovino · 27/01/2012, 07h54

Ben dans mon exemple aussi les blocs sont de hauteur variable

Là j'ai fixé la hauteur avec un height pour montrer le rendu, mais si tu le supprimes et que tu mets du texte à la place, ça devrait le faire...

Et au cas où, il faut aussi supprimer les background-color qui ne sont là que pour visualiser les différents éléments...

kriekbellevue · 27/01/2012, 09h58

Merci pour ta réponse, mais ...

Je me suis peut-être mal expliqué ...

Je connais le float, je ne suis pas novice.
Le problème est que je n'affiche pas mes blocs 5 à gauche puis 5 à droite. Moi je voudrais qu'ils se chevauchent.
1 2
3 4
5 6

et non
1 4
2 5
3 6

Franchement, je commence à croire qu'il faudrait utiliser du javascript la-dessous. J'ai beau cherché, je ne trouve rien.

Emyleen · 27/01/2012, 11h01

Bonjour,

Ben tu les mets en float left tout tes blocs et tu donnes une taille à ton conteneur, comme ça dans ton code tu les écris à la suite et ils seront l'un a la suite des autres dans l'affichage mais le fait de mettre un width au conteneur fera qu'il n'en affichera que 2 par ligne.

kriekbellevue · 27/01/2012, 11h25

C'est ce que je fais ...

Mais le problème est qu'en faisant cela on obtient le résultat du 1er croquis.
A savoir que les blocs s'alignent horizontalement.

kriekbellevue · 27/01/2012, 11h43

Je viens de bidouiller un truc en javascript qui a l'air de fonctionner ...
Je calcule toutes les différences d'hauteur (à gauche et à droite) et remonte les blocs quand nécessaire.

On dire que c'est bon.

Je vous remercie.

Bovino · 27/01/2012, 11h44

Citation:

Envoyé par kriekbellevue

Le problème est que je n'affiche pas mes blocs 5 à gauche puis 5 à droite. Moi je voudrais qu'ils se chevauchent.

Dans la structure que je t'ai donnée, à toi de déterminer quel contenu va à quel endroit et de remplir les div en conséquence...

NoSmoking · 28/01/2012, 13h38

Citation:

Envoyé par kriekbellevue

Je viens de bidouiller un truc en javascript qui a l'air de fonctionner ...
Je calcule toutes les différences d'hauteur (à gauche et à droite) et remonte les blocs quand nécessaire.

cela reste moyen, attendu que simplement en agençant comme l'indique Bovino le rendu sera le même et ce quelque soit le redimensionnement de la fenêtre et/ou le zoom de la page.

26/01/2012, 16h32	#1
kriekbellevue Candidat au titre de Membre du Club Inscription : juin 2005 Messages : 50 Détails du profil Informations forums : Inscription : juin 2005 Messages : 50 Points : 14 Points : 14	Alignement vertical de DIVs Bonjour à tous, Je suis en train d'essayer d'améliorer un de mes script, mais bloc. J'aimerais aligner des DIVs verticalement, mais de gauche à droite. Voici un croquis de ce que j'ai à l'heure actuel : Et voilà ce que j'aimerais avoir : J'utilise le display inline-block. Mais (normal), il aligne les div à la même hauteur. J'ai déjà vu cela (le nouveau profil facebook). D'où mon avis de faire pareil. Quelqu'un voit comment faire ? Merci d'avance, Colin.
	00

27/01/2012, 07h54	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	Ben dans mon exemple aussi les blocs sont de hauteur variable Là j'ai fixé la hauteur avec un height pour montrer le rendu, mais si tu le supprimes et que tu mets du texte à la place, ça devrait le faire... Et au cas où, il faut aussi supprimer les background-color qui ne sont là que pour visualiser les différents éléments... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

27/01/2012, 11h01	#6
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Bonjour, Ben tu les mets en float left tout tes blocs et tu donnes une taille à ton conteneur, comme ça dans ton code tu les écris à la suite et ils seront l'un a la suite des autres dans l'affichage mais le fait de mettre un width au conteneur fera qu'il n'en affichera que 2 par ligne. __________________ I want to break frite ~~ Chocolat....chocolat...CHOCOLAAAAAAAAAAT!!!
	00

26/01/2012, 18h50	#3
kriekbellevue Candidat au titre de Membre du Club Inscription : juin 2005 Messages : 50 Détails du profil Informations forums : Inscription : juin 2005 Messages : 50 Points : 14 Points : 14	J'ai oublié de préciser que les blocs étaient d'hauteur variable... Le contenu n'est pas fixe.
	01

27/01/2012, 09h58	#5
kriekbellevue Candidat au titre de Membre du Club Inscription : juin 2005 Messages : 50 Détails du profil Informations forums : Inscription : juin 2005 Messages : 50 Points : 14 Points : 14	Merci pour ta réponse, mais ... Je me suis peut-être mal expliqué ... Je connais le float, je ne suis pas novice. Le problème est que je n'affiche pas mes blocs 5 à gauche puis 5 à droite. Moi je voudrais qu'ils se chevauchent. 1 2 3 4 5 6 et non 1 4 2 5 3 6 Franchement, je commence à croire qu'il faudrait utiliser du javascript la-dessous. J'ai beau cherché, je ne trouve rien.
	00

27/01/2012, 11h25	#7
kriekbellevue Candidat au titre de Membre du Club Inscription : juin 2005 Messages : 50 Détails du profil Informations forums : Inscription : juin 2005 Messages : 50 Points : 14 Points : 14	C'est ce que je fais ... Mais le problème est qu'en faisant cela on obtient le résultat du 1er croquis. A savoir que les blocs s'alignent horizontalement.
	00

27/01/2012, 11h43	#8
kriekbellevue Candidat au titre de Membre du Club Inscription : juin 2005 Messages : 50 Détails du profil Informations forums : Inscription : juin 2005 Messages : 50 Points : 14 Points : 14	Je viens de bidouiller un truc en javascript qui a l'air de fonctionner ... Je calcule toutes les différences d'hauteur (à gauche et à droite) et remonte les blocs quand nécessaire. On dire que c'est bon. Je vous remercie.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email