我正在使用一个名为 Madcap Flare 的 XML 编辑器，它允许我使用 GUI 创建图像映射。由于这使得 map 易于编辑，我宁愿使用该技术。不幸的是，它呈现的代码不是 CSS 图像 map ，而是 HTML map ( map 、区域等)。我不想切换到 CSS 图像映射，因为我想在 GUI 中进行简单的编辑。
我希望我的图像映射与它左侧的文本右对齐。我已经尝试了以下技术并获得了指示的结果:
技巧 1:我使用 CSS float 包含图像的 div。 结果:图像贴图不再起作用，但图像向右浮动且文本换行。
技巧 2:我使用 CSS 使图像正确 float 。 结果:图像向右浮动，但 div 仍然在左侧。文本不换行，图像映射不再有效。
技巧 3:我设置了 div align="right"并完全删除了 CSS。 结果:图像向右浮动并且图像贴图有效，但文本不再换行。
我注意到图像贴图只有在我 float 图像或其容器时才会中断；我什至向左浮动进行实验并看到了相同的结果。有没有办法 float 图像映射？我想知道问题是否是图像大小调整问题，但我检查了代码并且图像映射没有继承任何图像大小样式。我还在测试中将图像的最大宽度和最大高度设置为 100%，以确保它根本没有缩小，但我再次看到了相同的结果。我还认为 HTML align=right 实验表明问题不是继承的样式。
有什么提示/技巧吗？或任何确认您无法 float 图像 map 的信息？谢谢。
最佳答案
如果包含图像映射的 div 具有固定大小并且位于其父 DIV 的上边框，则可以执行以下操作:
创建一个与包含图像映射的大小相同的空 DIV，并将其设为 float right (在顶部)。没有边框，没有背景，没有内容。文本将围绕那个 float 。
申请position: relative到父 DIV 和 position: absolute到包含图像映射的 div。申请top: 0; , right: 0和 width和 height作为空的 float DIV。
这会将图像映射放置在空的 float DIV 上方，而文本则围绕它 float 。
关于html - CSS float 打破 HTML 图像映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48633000/