html - 如何管理 Css Floats

Question

我需要做这样的事情。我如何管理文本、图像和数字的 float 。似乎无法正确理解文本。

我对所有三个都使用了 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