Html 具有多个类的背景spry图像

我听说过合并多个课程，这在这种情况下对我很有帮助。我有一个带有图标的侧边栏，所以我将图标组合在一个垂直图像中，现在我想在下一个块中显示下一个图像，依此类推

我已经这样做了，并试图在css上节省大量的编码和kb，使用普通类很容易做到这一点，但我想结合这些类来节省kb和编码时间

有人能帮忙吗，第4个在dreamweaver中做了它应该做的事情，但在浏览器中没有。谢谢嘿

对于那些想知道的人，我正在努力实现右边的边栏。我正在重新开发该场地——在分区中，而不是表格、trs和tds中

html文件

<div class="sidepanel">
 <div class="sidepanelleft 1"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>
<div class="sidepanel">
 <div class="sidepanelleft 2"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>
<div class="sidepanel">
 <div class="sidepanelleft 3"></div>
 <div class="sidepanelright">Content Goes Here</div>
</div>

---

我不知道你想要达到什么目标（你还没有具体说明），但对我来说似乎是可行的：

---

（我当然没想到背景位置会有这样的结果）

不要过早地优化CSS。这会适得其反。好吧，我只是觉得有一个简单的方法，不会适得其反；-）-我仍然希望有；-）谢谢，当然是。使用CSS缩小器（谷歌术语）。我正在设计-看看侧边栏Clear：两者都不是问题，我试图让下一块图像显示在下一块中-因此背景位置和spryI刚刚发现它不起作用的原因，是因为类名的第一个字符不能是数字。我将它们重命名为a1、a2、a3和a4，突然，我开始得到结果，第四个开始工作。试试看，看它是否适合你。：）编辑：这里是我获得这些信息的链接：太棒了，谢谢Frostyfrog-这项工作。。。我知道这应该行得通，但我真的不知道这条规则——谢谢——祝你有一个美好的一天

.sidepanelleft { display:block; width:45px; height:45px; float:left; background:url(../images/webhostingfeatures.jpg); background-repeat:none}
.1 { top: 0 -55px }
.2 { position: 0 -55px }
.3 { background: 0 -55px }
.4 { background-position: 0 -55px }