CSS — Как прижать несколько блоков друг к другу?

Question

[bessard]

Здравствуйте!
Необходимо прижать три блока друг к другу - так как показано на картинке.


но у меня выходит во так


исходный код тут


Спасибо за помощь

Comments

[scottparker]

построй правильную структуру html разметки

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/mdrrxJe

Comments

[bessard]

Благодарю за помощь!

Answer 2

[Артём Ведищев]

Мой вариант

Comments

[bessard]

все решилось без флексов - намного проще
с флексами я игрался - все равно выходило не то что хотелось
спасибо за готовность помочь!

Answer 3

[bessard]

тут исходник

Answer 4

[MamaLuyba]

изображение и "125" закидываешь в div с display: flex. Ну и дальше, отступы, отступы, выравнивания...

Comments

[bessard]

все решилось без флексов - намного проще
с флексами я игрался - все равно выходило не то что хотелось
спасибо за готовность помочь!

Answer 5

[Untiwe]

вариант на flexbox

<div class="standart_item">
 <img src="icons/web-5.png" alt="" class="block50">
  <div class="standart_descr block50">125</div>
  <div class="standart_descr-down block100">Our projects</div>
</div>

.standart_item {
  width: 260px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.block50{
width: 50%;
}
.block100{
width: 100%;
}

Comments

[bessard]

все решилось без флексов - намного проще
с флексами я игрался - все равно выходило не то что хотелось
спасибо за готовность помочь!