< style > #vertgraph {}{ width: 378px; height: 207px; position: relative; background: url("http://www.ximicc.com/attachments/month_0803/52008310134528.gif") no-repeat; } #vertgraph ul {}{ width: 378px; height: 207px; margin: 0; padding: 0; } #vertgraph ul li {}{ position: absolute; width: 28px; height: 160px; bottom: 34px; padding: 0 !important; margin: 0 !important; background: url("http://www.ximicc.com/attachments/month_0803/u200831013462.jpg") no-repeat !important; text-align: center; font-weight: bold; color: white; line-height: 2.5em; } #vertgraph li.high {}{ left: 24px; background-position: 0px bottom !important; } #vertgraph li.low {}{ left: 101px; background-position: -28px bottom !important; } #vertgraph li.lower {}{ left: 176px; background-position: -56px bottom !important; } #vertgraph li.medium {}{ left: 251px; background-position: -84px bottom !important; } #vertgraph li.info {}{ left: 327px; background-position: -112px bottom !important; } </ style > < div id ="vertgraph" > < ul > < li class ="high" style ="height: 160px;" > 16 </ li > < li class ="low" style ="height: 70px;" > 7 </ li > < li class ="lower" style ="height: 30px;" > 3 </ li > < li class ="medium" style ="height: 80px;" > 8 </ li > < li class ="info" style ="height: 20px;" > 2 </ li > </ ul > </ div > 原文来自:http://www.ximicc.com/article.asp?id=77