Aligner deux éléments l'un en dessous de l'autre

**Hilary** · 10/07/2010, 02h09

Bonsoir à tous!

J'aimerais savoir comment aligner ces deux numréos de téléphone l'un en dessous de l'autre.

Voici la capture d'écran:

**tsunamichups** · 11/07/2010, 11h13

salut, tu peu mettre les informations dans 4 div
2 div de même largeur qui contiendraient les descriptif de numéro et les deux autre div qui viendraient se coller a la droite qui elles contiendraient les numéros

je te donne un 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
 
<style tyle="text/css">
.info-num
{
width:250px;
float:left;
}
 
.numero
{
float:left;
width:10px;
}
</style>
 
<div class="info-num">Info num 1</div>
<div class="numero">0102030405</div>
 
<div class="info-num">Info num 2</div>
<div class="numero">0607080910</div>

**Bisûnûrs** · 12/07/2010, 08h32

Envoyé par tsunamichups

je te donne un exemple

Y a de l'idée. Mais pourquoi uniquement des div ? Il existe d'autres éléments que les div ...

**tsunamichups** · 13/07/2010, 00h17

Envoyé par Bisûnûrs

Y a de l'idée. Mais pourquoi uniquement des div ? Il existe d'autres éléments que les div ...

J'ai trouvé ça plus rapide

mais avec <span></span> ça marche aussi

**vodiem** · 13/07/2010, 01h15

salut à tous,

étant donné que le bloc numéro suit il n'est pas nécessaire de définir son style pour son positionnement:

Code HTML :

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

1
2
<span style="width:100px;float:left;">le nom long</span>01-02-03-05-04</br>
<span style="width:100px;float:left;">nom</span>01-02-03-05-04</br>

il y a encore la solution de définir ca dans un tableau:

Code :

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

1
2
3
4
5
6
7
8
9
10
<table>
<tr>
	<td>le nom long</td><td>01-02-03-05-04</td>
</tr>
<tr>
<tr>
	<td>nom</td><td>01-02-03-05-04</td>
</tr>
</tr>
</table>

qui aura l'avantage de s'adapter automatiquement en fonction du contenu.
(prévoir un espacement entre cellule)

**Bisûnûrs** · 13/07/2010, 07h40

Envoyé par tsunamichups

J'ai trouvez ca plus rapide

mais avec <span></span> ca marche aussi

...
T'as raison, remplace une balise vide de sens par une autre balise vide de sens. Le mot sémantique te dit-il quelque chose ?

**tsunamichups** · 13/07/2010, 09h57

Au niveau de la validation w3c ca passe

Mais qu'aurais tu mis toi plutôt que des div ou des span ?
(les table c'est dépassé je les cites plus)

**marco_fot_hxc** · 12/07/2010, 08h29

Bonjour,

personnellement je proposerai quelque chose dans ce style :

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
32
33
34
35
36
37
38
 
<style>
div#info-wrapper {
	width: 180px;
}
 
div.info {
	width: 100%;
}
 
div.info span {
	display: inline-block;
}
 
span.num {
	float: right;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<div id="info-wrapper">
	<div class="info">
		<span class="nom">mon nom</span>
		<span class="num">01-02-03-05-04</span>
	</div>
	<div class="info">
		<span class="nom">mon nom</span>
		<span class="num">01-02-03-05-04</span>
	</div>
</div>
 
</body>
</html>

En espérant que ça t'aide...

Bon courage

**marco_fot_hxc** · 12/07/2010, 08h35

Au passage, on pourrait aussi se dire que, sémantiquement, passer par une liste serait plus juste. Donc un ul ou chaque "lot" nom+num est encapsulé dans un li.

Si tu vois pas ce que je veux dire n'hésites pas

Aligner deux éléments l'un en dessous de l'autre

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager