Come posso fare in modo che un DIV si comporti come un IMG da usare come sprite CSS?

Question

Ho scritto codice che crea automaticamente sprite CSS in base ai tag IMG in una pagina e li sostituisce con DIV con (quello che pensavo fosse) CSS appropriato per posizionare l'immagine sprite come sfondo lasciando trasparire la parte appropriata - il problema è che non riesco a far sì che i DIV si comportino come un calo delle sostituzioni per gli IMG.

Se lascio il valore predefinito 'display' impostato su 'block', se l'IMG originale era posizionato alla fine di un testo, il DIV sostitutivo passerà alla riga successiva dopo il testo (che ovviamente è quello che si aspetterebbe qualcosa con display: block to do).

Se cambio 'display' in linea, allora il DIV rimane sulla stessa riga del testo ma ignora la 'larghezza' e 'l'altezza' che ho impostato e collassa. Ho provato a inserire & nbsp; all'interno del DIV ma ci vuole solo una larghezza sufficiente per contenere l'nbsp.

Ho provato a provare a impostare display su tutti i possibili valori (inclusi quelli "oscuri" come "table-row", "run-in", "compact", ecc.) ma tutti senza fortuna. È persino possibile creare un DIV con lo stesso comportamento di layout di un IMG?

Sono aperto ad avere qualcosa di più complicato di un singolo DIV, tuttavia ho provato le cose ovvie lì (un DIV all'interno di un altro in cui il DIV interno è impostato per visualizzare: blocco con il set esterno da visualizzare: in linea) ma non ho trovato una combinazione lì che funzioni neanche.

Ci sono sempre cose specifiche che posso fare al di fuori dell'IMG / DIV sostituito per ottenere il layout che desidero, ma il mio obiettivo è avere un meccanismo di auto-CSS-sprite generico che funzioni indipendentemente dal resto dell'HTML.

Answer 1

Hai provato display: inline-block; ?

potresti dover usare anche display: -moz-inline-block; per firefox2

Answer 2

Le immagini hanno un equivalente di "display: blocco in linea". Questo non era originariamente incluso nei CSS ma è stato aggiunto in parte per affrontare il fatto che le immagini si comportano in questo modo.

Il problema è che tutti i browser lo supportano proprio ora. Se vuoi supportare i browser anche solo un anno fa, sei bloccato.

Un'altra soluzione, ma non altrettanto eccezionale, è la fluttuazione del div (" float: left ").

  

blocco in linea : introdotto in CSS 2.1. Questo fa sì che l'elemento generi una casella di elemento a blocchi che fluirà con il contenuto circostante come se fosse una singola casella incorporata ( si comporta in modo molto simile a un elemento sostituito [che significa un'immagine] sarebbe .)

Centro per sviluppatori Mozilla di origine

Answer 3

Display: inline-block dovrebbe funzionare in questa situazione. L'hai provato?