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.