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

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

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

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

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

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

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

Ответы [ 3 ]

13 голосов
/ 11 ноября 2008

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

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

4 голосов
/ 11 ноября 2008

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

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

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

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

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

1 голос
/ 11 ноября 2008

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

...