html - una - ¿Cómo puedo hacer que un DIV se comporte como un IMG para usar como un sprite de CSS?
como insertar una imagen en html desde una carpeta (3)
He escrito un código que crea automáticamente sprites CSS basados en las etiquetas IMG en una página y los reemplaza con DIV''s con (lo que pensé que era) un CSS apropiado para posicionar la imagen del sprite como un fondo dejando ver la parte apropiada - el problema es que no puedo hacer que los DIV se comporten como reemplazos para IMG.
Si dejo el valor ''display'' predeterminado configurado en ''block'', entonces si el IMG original se colocó al final de algún texto, el DIV de reemplazo saltará a la siguiente línea después del texto (que por supuesto es lo que esperaría algo con pantalla: bloque para hacer).
Si cambio la ''pantalla'' a en línea, entonces la DIV permanece en la misma línea que el texto, pero ignora el ''ancho'' y la ''altura'' que he establecido y se contrae. He intentado poner dentro del DIV, pero solo ocupa suficiente ancho para contener el nbsp.
Intenté experimentar con la configuración de la visualización de todos los valores posibles (incluidos los "oscuros" como ''tabla-fila'', ''ejecutar'', ''compacta'', etc.) pero todo sin suerte. ¿Es posible crear un DIV con el mismo comportamiento de diseño que un IMG?
Estoy abierto a tener algo más complicado que solo un DIV, sin embargo, he intentado las cosas obvias allí (un DIV dentro de otro donde el DIV interno está configurado para mostrar: bloquear con el conjunto externo para mostrar: en línea) pero no lo tengo Encontré una combinación allí que funciona bien.
Siempre hay cosas específicas que puedo hacer fuera del IMG / DIV reemplazado para obtener el diseño que quiero, pero mi objetivo es tener un mecanismo genérico auto-CSS-sprite que funcione independientemente del resto del HTML.
Las imágenes tienen un equivalente de "display: inline-block". Esto no se incluyó originalmente en CSS, pero se agregó en parte para abordar el hecho de que las imágenes se comportan de esta manera.
El problema es que todos los navegadores lo están apoyando ahora. Si quieres admitir navegadores desde hace un año, estás atascado.
Otra solución, pero no tan buena, es flotar el div ("flotar: izquierda").
bloque en línea : introducido en CSS 2.1. Esto hace que el elemento genere un cuadro de elemento de bloque que fluirá con el contenido circundante como si fuera un solo recuadro alineado (se comporta de forma muy parecida a como lo haría un elemento reemplazado [que significa una imagen] ).
Pantalla: se supone que el bloque en línea funciona en esta situación. ¿Lo intentaste?
¿Has intentado display: inline-block; ?
es posible que también deba usar display: -moz-inline-block; para firefox2