Как правильно выровнять блоки?

Question

[eellazy]

Всем привет. Помогите, пожалуйста. Я сделал на кодипэн блоки. Не уверен что правильно и логично это делал. Но тем не менее... . У меня не получается поднять число немного выше, скажем на 5пх. а надпись снизу ниже. Так, что бы текст размещался справа от фото. И что скажите по поводу этого кода? Насколько неправильно я сверстал? Нужно как фото . Спасибо


codepen.io/anon/pen/zvrrry?editors=110

Answer 1

[Виталий Герасимов]

Я бы сделал немного иначе, по сути перевел бы все на div блоки, или у спанов поставить display: block
codepen.io/anon/pen/epJJVx?editors=110

Comments

[Виталий Герасимов]

Лично я любитель плодить дивы, но обычно это выручает меня, так что я бы структуру оставил такую же а вот там где кишки сделал бы так картинка

Число
текст под числом

И вместо float'ов я бы лучше использовал display: inline-block например, но тут на вкус и цвет, просто float меня частенько подводил...

[eellazy]

Виталий Герасимов: а затея с width:23% вообще логична?

[eellazy]

думал использовать bootstrap и написать col-md-2. Но все же решил сделать с широной в 25%

[Виталий Герасимов]

eellazy: Ну все зависит от макета, если фишка в том что бы там и отступы были "резиновые" то все нормально, а если фиксированные, то я бы сделал 25% и сделал padding внутри блока, а потом еще 1 вложенный для рамок итд. кстати если будите использовать inline-block на 25%, то между блоками нужно ставить комментарии т.е
Блок 1Блок 2Блок 3Блок 4
Это позволит впихнуть 4е блока на 1 строку.
и не стоит забывать про vertical-align: top; что бы не было плясок у блоков.