css图像建筑与精灵

Question

我正在尝试使用css sprites创建动态图标。这是我一直得到的：

所以我实际上有几个关于出了什么问题的问题：

1. 为什么图标（带十字的方框）与紫色方框不重叠？
2. 为什么紫色盒子之间有2px的空间？

修改

这是一个jsFiddle：http://jsfiddle.net/hWhUb/

这是我使用的相关css：

.icon {
    position: relative;
    width: 87px;
}

.icon .icon-type {
    position: absolute;
    left: 0;
}

.icon .brigade, .icon .icon-type {
    background-image: url('img/play/splitbrigades.png');
}

.icon-hero {
    width: 87px;
    height: 71px;
    background-position: -11px -11px;
    background-repeat: no-repeat;
}

.brigade-purple-left {
    width: 27px;
    height: 71px;
    background-position: -287px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-middle {
    width: 30px;
    height: 71px;
    background-position: -334px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

.brigade-purple-right {
    width: 28px;
    height: 71px;
    background-position: -384px -12px;
    display: inline-block;
    background-repeat: no-repeat;
}

和html：

<div class="icon">
    <div class="brigade brigade-purple-left">&nbsp;</div>
    <div class="brigade brigade-purple-middle" style="width: 22px;">&nbsp;</div>
    <div class="brigade brigade-purple-right">&nbsp;</div>
    <div class="icon-type icon-hero">&nbsp;</div>
</div>

任何人都可以向我解释我做错了什么，以及可能如何以更好的方式实现我的结果（如果可能的话）？

Answer 1

你应该使用它。它必须包含顶部。

 .icon .icon-type   { position: absolute; left: 0; top:0}

直播：

http://jsfiddle.net/hWhUb/1/

Answer 2

将float: left添加到.icon .brigade

.icon .brigade {
    float: left;
    margin: 0;
}

这应该可以解决您需要的一切或让您在正确的地方完成它！

紫色框之间的间距是因为您使用display: inline-block;并且这些div之间的标记中的空格会生成该间距。

图标不会显示在框的“上方”，因为它缺少top: 0;声明