如何管理Css Floats

Question

我需要做这样的事情。 如何管理文本，图像和数字的浮动。似乎没有正确的文字。

我对所有三个使用了span，并为span的图像设置了背景。 有没有更好的方法来做到这一点？我怎么得到这个。 谢谢！

http://jsfiddle.net/yapamjfy/

.counter-inner ul li{
  float: left;
  background: red;
}

.counter-image {
  display: block;
  width: 58px;
  height: 70px;
  border-right: 2px solid #fc6867;
  background: red;
}

.counter-text{
  float: left;
}

Answer 1

你可以尝试这个：

.counter-inner {
  width: 763px;
  margin: 0 auto;
}

.counter-inner ul {
  list-style: none;
}

.counter-inner ul li {
  float: left;
  background: red;
}

.counter-image {
  display: block;
  width: 58px;
  height: 70px;
  border-right: 2px solid #fc6867;
  background: red;
}

.counter-image.first {
  background: url('../images/counter-1.png') center center no-repeat;
  float: left;
}

.counter-number {
  font-family: 'Roboto', sans-serif;
  float: left;
  padding-top: 15px;
  padding-left: 17px;
}

.counter-text {
  float: left;
  margin-top:40px;
  margin-left:-15px;

}
ul li
{
  padding-right:10px;
}

DEMO HERE