alignement modifié par contenu ?

[SpaceFrog]

le html

Code :

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
		    <div id="sommaire_produit" class="titre">
			SOMMAIRE DIFFUSER<br/>
                    </div>
		    <div id="rubrique_12" class="rubrique">
ENTRÉES D'AIR
</div>
<div class="thumb">
<span>VM</span>
</div>
<div class="thumb">
<span>ESEA</span>
 
</div>
<div class="thumb">
<span>AERA HY</span>
</div>
<div class="thumb">
<span>M</span>
</div>
<div class="thumb">
<span>ISOLA 2</span>
</div>
<div class="thumb">
<span>ISOLA HY</span>
</div>

le css

Code :

1
2
3
4
5
6
7
8
.thumb {
	display:inline-block;
	width:100px;
	height:100px;
	border:solid 1px navy;
	margin:5px 7px 5px 0;
	clear:right;
	}

http://www.developpez.net/forums/att...1&d=1290697116

pourquoi si le contenu est sur plusieurs ligne ça foire tout l'alignement ???

[sebest777]

Le pourquoi, je pourrais pas te le dire à froid par contre pour la solution qui est de plus, multi plateforme :

Code :

1
2
3
4
5
6
7
8
9
.thumb {
	display:block;
	float:left;
	width:100px;
	height:100px;
	border:solid 1px navy;
	margin:5px 7px 5px 0;
	clear:right;
	}

le inline est remplacé ici par un float qui est assez sûr.

[SpaceFrog]

le souci du float est que comme j'ai plusierus blocs de ce type a se suivre ... ça mets le bazar pour les suivant il me faudrait un clear left ...

[Candygirl]

Envoyé par SpaceFrog

pourquoi si le contenu est sur plusieurs ligne ça foire tout l'alignement

Parce que l'alignement par défaut se fait sur la ligne de base.

Si tu vires ton height de 100px, tu verras que tes boîtes sont alignée sur la ligne de base du texte, ce qui persistes si tu l'ajoutes ensuite.

En ajoutant un vertical-align:middle tu devrais obtenir l'affichage souhaité.