CSS float ломает HTML-карту изображений
Я использую XML-редактор Madcap Flare, который позволяет мне создавать карты изображений с помощью графического интерфейса. Так как это делает карты легко редактируемыми, я бы предпочел использовать эту технику. К сожалению, код, который он отображает, является не картой изображений CSS, а кодом HTML (карта, область и т. Д.). Я не хочу переключаться на карту изображений CSS, потому что я хочу легко редактировать в GUI.
Я хочу, чтобы моя карта изображений была выровнена вправо с текстом слева от него. Я пробовал следующие методы с указанными результатами:
Техника 1: я поместил div, содержащий изображение, прямо с помощью CSS. Результат: карта изображения больше не работает, но изображение плавно перемещается и текст переносится.
Техника 2: я поместил изображение прямо с помощью CSS. Результат: изображение плавает вправо, но div остается слева. Текст не переносится, и карта изображения больше не работает.
Техника 3: я установил div align="right" и полностью удалил CSS. Результат: изображение смещается вправо и карта изображения работает, но текст больше не переносится.
Я заметил, что карта изображения разрывается только когда я плаваю на изображении или его контейнере; Я даже плыл налево к эксперименту и увидел те же результаты. Нет ли способа создать карту изображения? Я задавался вопросом, была ли проблема проблемой изменения размера изображения, но я проверил код, и карта изображения не наследует какие-либо стили размера изображения. Я также установил для изображений максимальную ширину и максимальную высоту изображения 100% в своих тестах, чтобы убедиться, что оно вообще не уменьшается, но я снова увидел те же результаты. Я также думаю, что эксперимент HTML align=right показал, что проблема не была унаследованным стилем.
Любые советы / хитрости? Или какое-либо подтверждение того, что вы не можете использовать карту изображений? Благодарю.
1 ответ
Если div, содержащий карту изображения, имеет фиксированный размер и находится на верхней границе родительского DIV, вы можете сделать следующее:
Создайте пустой DIV такого же размера, как тот, который содержит карту изображения, и сделайте так, чтобы float right (на вершине). Без рамки, без фона, без содержимого. Текст будет плавать вокруг этого.
Применять position: relative для родительского DIV и position: absolute в div, содержащий карту изображения. Применять top: 0;, right: 0 и width а также height как пустой плыл DIV.
Это помещает карту изображения над пустым плавающим DIV, и текст плавает вокруг него.