当前位置:  开发笔记 > 前端 > 正文

如何让DIV像IMG一样用作CSS精灵呢?

如何解决《如何让DIV像IMG一样用作CSS精灵呢?》经验,为你挑选了1个好方法。

我编写的代码可以根据页面中的IMG标签自动创建CSS sprite,并用DIV替换它们(我认为是)适当的CSS来将精灵图像定位为背景,让相应的部分显示出来 - 问题是我不能让DIV表现为IMG替代品的下降.

如果我将默认的'display'值设置为'block',那么如果原始IMG位于某些文本的末尾,则替换DIV将跳到文本后面的下一行(这当然是我期望的东西) with display:block to do).

如果我将'display'更改为inline,那么DIV与文本保持在同一行,但它忽略了我设置和折叠的'width'和'height'.我已经尝试将其放入DIV内部,但它只占用了足够的宽度来容纳NST.

我已经尝试过将显示设置为所有可能的值(包括"表格行","磨合","紧凑"等"模糊"),但都没有运气.甚至可以创建一个与IMG具有相同布局行为的DIV吗?

我愿意拥有比单个DIV更复杂的东西,但是我已经尝试了那里显而易见的事情(一个DIV在另一个内部DIV设置显示的内部:阻止外部设置显示:内联)但我避风港找不到那种有效的组合.

在替换的IMG/DIV之外我总能做一些特定的事情来获得我想要的布局,但我的目标是拥有一个通用的自动CSS-sprite机制,无论HTML的其余部分如何都能工作.



1> Andy Ford..:

你试过display: inline-block;吗?

你可能还必须使用display: -moz-inline-block;firefox2

推荐阅读
保佑欣疼你的芯疼
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有