Как я могу заставить DIV вести себя как IMG для использования в качестве спрайта CSS?

Question

Я написал код, который автоматически создает CSS-спрайты на основе тегов IMG на странице и заменяет их на DIV на (как я думал, был) соответствующий CSS, чтобы расположить изображение спрайта в качестве фона, пропуская соответствующую часть - проблема в том, что я не могу заставить DIV вести себя как замена замен для IMG.

Если я оставлю значение по умолчанию 'display', установленное на 'block', тогда, если исходное IMG было расположено в конце некоторого текста, замещающий DIV будет переходить к следующей строке после текста (что, конечно, то, что я будет ожидать что-то с display: block, чтобы сделать).

Если я изменю «отображение» на встроенное, то DIV остается на той же строке, что и текст, но игнорирует заданные мной «ширину» и «высоту» и сворачивается. Я пытался поместить & nbsp; в DIV, но тогда он занимает достаточно ширины, чтобы вместить nbsp.

Я попытался поэкспериментировать с настройкой отображения для всех возможных значений (включая «неясные», такие как «таблица-строка», «обкатка», «компакт» и т. д.), но все безуспешно. Можно ли даже создать DIV с тем же поведением макета, что и IMG?

Я открыт для того, чтобы иметь что-то более сложное, чем просто один DIV, однако я попробовал очевидные вещи там (один DIV внутри другого, где внутренний DIV установлен для отображения: блок с внешним, установленным для отображения: inline) но я не нашел там комбинации, которая бы тоже работала.

Всегда есть конкретные вещи, которые я могу сделать вне замененного IMG / DIV, чтобы получить нужный макет, но моя цель - иметь общий механизм автоматического CSS-спрайта, который работает независимо от остальной части HTML.

Answer 1

Вы пробовали display: inline-block; ?

вам также может понадобиться использовать display: -moz-inline-block; для firefox2

Answer 2

Изображения имеют эквивалент «display: inline-block». Первоначально он не был включен в CSS, но был добавлен частично, чтобы учесть тот факт, что изображения ведут себя таким образом.

Проблема в том, что все браузеры только сейчас поддерживают его. Если вы хотите поддерживать браузеры даже год назад, вы застряли.

Другое, но не столь удачное, решение - это плавающий элемент div (" float: left ").

  

встроенный блок : введено в CSS 2.1. Это заставляет элемент генерировать блок блочного элемента, который будет перетекать с окружающим контентом, как если бы это был один встроенный блок ( ведет себя как заменяемый элемент [имеется в виду изображение] .).

Источник Центр разработчиков Mozilla

Answer 3

Дисплей: inline-block должен работать в этой ситуации. Вы пробовали это?