Html 如何管理Css浮动

我需要做这样的东西。 如何管理文本、图像和数字的浮动。似乎无法正确理解课文

我使用了三个span，并为span的图像设置了背景。 有没有更好的办法？我怎样才能得到这样的结果。 谢谢大家!

你可以试试这个：

.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;
}

---

Dat's ok先生@user3783888我的荣幸

.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;
}