Comment puis-je faire en sorte qu'une DIV se comporte comme un IMG utilisable comme sprite CSS?

Question

J'ai écrit un code qui crée automatiquement des sprites CSS basés sur les balises IMG d'une page et les remplace par des CSS DIV (ce que je pensais être) du CSS approprié pour positionner l'image du sprite en tant qu'arrière-plan laissant apparaître la partie appropriée - le problème est que je ne peux pas faire en sorte que les DIV se comportent comme des remplaçants pour les DIM.

Si je laisse la valeur par défaut 'display' définie sur 'block', puis si l'IMG d'origine était positionné à la fin d'un texte, le DIV de remplacement passera à la ligne suivante après le texte (ce qui est bien sûr ce que je attendrait quelque chose avec display: block à faire).

Si je change l'affichage en inline, le DIV reste sur la même ligne que le texte mais il ignore les "largeur" ??et "hauteur" que j'ai définies et est réduit. J'ai essayé de placer & nbsp; dans la DIV, mais celle-ci ne prend que suffisamment de largeur pour contenir le nbsp.

J'ai essayé d'expérimenter l'affichage de toutes les valeurs possibles (y compris les valeurs "obscures" telles que "table-ligne", "run-in", "compact", etc.), mais sans aucune chance. Est-il même possible de créer une DIV avec le même comportement de présentation qu'un IMG?

Je suis ouvert à l'idée d'avoir quelque chose de plus compliqué qu'un simple DIV, cependant, j'ai essayé des choses évidentes ici (un DIV dans un autre où le DIV interne est défini pour afficher: bloc avec le jeu extérieur à afficher: en ligne) mais je n'ai pas trouvé de combinaison qui fonctionne non plus.

Il y a toujours des choses spécifiques que je peux faire en dehors de l'IMG / DIV remplacé pour obtenir la mise en page souhaitée, mais mon objectif est de disposer d'un mécanisme générique auto-CSS-sprite qui fonctionne indépendamment du reste du code HTML.

Answer 1

Avez-vous essayé d’afficher : inline-block; ?

vous devrez peut-être également utiliser display: -moz-inline-block; pour firefox2

Answer 2

Les images ont un équivalent de "display: inline-block". Cela n’était pas initialement inclus dans CSS, mais a été ajouté en partie pour remédier au fait que les images se comportent de cette manière.

Le problème est que tous les navigateurs le supportent maintenant. Si vous souhaitez prendre en charge les navigateurs d'il y a un an, vous êtes bloqué.

Une autre solution, mais pas aussi géniale, consiste à faire flotter la div ("float: left").

  

bloc en ligne : introduit en CSS 2.1. Ainsi, l’élément génère une zone d’élément de bloc qui contient le contenu environnant comme s’il s’agissait d’une boîte inline unique ( se comportant comme un élément remplacé [signifiant une image] .).

Centre de développement Mozilla pour les développeurs

Answer 3

Affichage: inline-block est supposé fonctionner dans cette situation. L'avez-vous essayé?