как управлять Css Floats

Question

Мне нужно сделать что-то вроде этого. Как управлять поплавками текста, изображения и числа. Не похоже, чтобы текст был прав.

Я использовал пролет для всех трех и задал фон для изображения пролета. есть ли лучший способ сделать это? и как мне это получить. Спасибо!

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