Discussion :

[niavlys77]

Bonjour,

Voilà mon problème. J'ai un span B contenu dans un span A et je souhaiterai que la hauteur de B s'adapte automatiquement à la hauteur de A sachant que A peut être de hauteur variable. J'ai essayé de plein de manière différentes de tritouiller mon code, mais soit B est adapté à son contenu, soit je suis obligé de fixer une hauteur ce qui n'est pas le résultat désiré.

voici du code pour vous inspirer...

HTML

Code :

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

1
2
3
4
5
 
<span id="A">
	<span id="B">1</span>
        <img src="guiliguili.jpg" />
</span>

CSS

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
 
#A
{
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid rgb(12,88,165);
	color: black;	
	font-size: xx-large;
	float:left;
	margin: 10px;
	height: auto;
	vertical-align: middle;
}
 
#B
{
	background-color: rgb(223,238,253);
	float:left;
	width: 60px;
	height: 100px;
	vertical-align: middle;
	text-align: center;
}

Merci par avance des réponses que vous seriez amené à m'apporter.

[Macmillenium]

Bonjour,

J'ai un span B contenu dans un span A et je souhaiterai que la hauteur de B s'adapte automatiquement à la hauteur de A sachant que A peut être de hauteur variable.

C'est possible avec un height:100% sur #B mais cela ne fonctionne que si le height du conteneur #A est renseigné en px ou en em.

[Tsilefy]

Sinon, si la solution de Macmillenium (fixer une taille à A) ne te convient pas, tu feras mieux de regarder du côté de javascript.

[devyan]

Heu... Il me semble que du fait que "span" est un conteneur de type "inline" il n'est pas possible de modifier son attribut "height" directement non ?

Par contre, il est peut-être possible d'utiliser "line-height"...

[Macmillenium]

Salut,

Heu... Il me semble que du fait que "span" est un conteneur de type "inline" il n'est pas possible de modifier son attribut "height" directement non ?

Il y a déjà un float:left qui confère un nouveau contexte de formatage block au span => Il passe donc en display:block

[devyan]

Salut,



Il y a déjà un float:left qui confère un nouveau contexte de formatage block au span => Il passe donc en display:block

Exact, je n'avais pas fait attention au "Float"