Ответ 1
Вы попробовали display: inline-block;?
вам может потребоваться также использовать display: -moz-inline-block; для firefox2
Как я могу заставить DIV вести себя как IMG для использования в качестве спрайта CSS?
Я написал код, который автоматически создает CSS-спрайты на основе тегов IMG на странице и заменяет их DIV (как я думал) соответствующим CSS, чтобы позиционировать изображение спрайта в качестве фона, позволяя соответствующей части показывать - проблема в том, что я не могу заставить DIV вести себя как сокращение заметок для IMG.
Если я оставлю значение по умолчанию "display" установленным на "block", то, если исходный IMG был помещен в конце некоторого текста, замена DIV будет сбрасываться до следующей строки после текста (что, конечно же, является тем, что я ожидал бы чего-то с дисплеем: блок делать).
Если я изменил "display" на inline, тогда DIV останется на той же строке, что и текст, но игнорирует "ширину" и "высоту", которые я установил и сбрасывает. Я пробовал поставить внутри DIV, но тогда он занимает достаточно ширины, чтобы содержать nbsp.
Я пробовал экспериментировать с настройкой отображения на все возможные значения (включая "неясные", такие как "table-row", "run-in", "compact" и т.д.), но все без везения. Возможно ли создать DIV с тем же макетом, что и IMG?
Я открыт для того, чтобы иметь что-то более сложное, чем просто один DIV, однако я пробовал там очевидные вещи (один DIV внутри другого, где установлен внутренний DIV: блок с внешним набором для отображения: inline) но я не нашел там комбинацию.
Есть всегда конкретные вещи, которые я могу сделать за пределами замененного IMG/DIV, чтобы получить макет, который я хочу, но моя цель - создать общий механизм автоматического CSS-sprite, который работает независимо от остальной части HTML.
Ответы
Ответ 2
Изображения имеют эквивалент "display: inline-block". Это не было первоначально включено в CSS, но было добавлено частично, чтобы обратить внимание на то, что изображения ведут себя таким образом.
Проблема в том, что все браузеры сейчас поддерживают его. Если вы хотите поддерживать браузеры даже год назад, вы застряли.
Другое, но не такое большое решение - это float div ( "float: left" ).
встроенный блок: введен в CSS 2.1. Это приводит к тому, что элемент генерирует поле блока элементов, которое будет протекать с окружающим контентом, как если бы это был единственный встроенный блок (, действующий как замещенный элемент [значение изображения] будет.).
Ответ 3
Дисплей: встроенный блок должен работать в этой ситуации. Вы попробовали?