Как правильно сверстать блок с иконками?

Question

[dqwe93]

Есть вот такой блок


как видно заголовок и название идет четко друг под другом. Я пытаюсь сверстать его вот так

<div class="advantages">
				<div class="advantages__item">
					<span class="advantages_icon-eye"></span>
					<div class="advantages_name clearfix">
						1. Lorem ipsum
					</div>
					<div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div>
				</div>
				<div class="advantages__item">
					<span class="advantages_icon-brush"></span>
					<div class="advantages_name clearfix">
						2. Lorem ipsum
					</div>
					<div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div>
				</div>
				<div class="advantages__item">
					<span class="advantages_icon-heart"></span>
					<div class="advantages_name clearfix">
						3. Lorem ipsum
					</div>
					<div class="advantages_description">Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.</div>
				</div>
			</div>

.advantages{
	float:left;
	width:570px;
}

.advantages_icon-eye{
	display:block;
	float:left;
	width:31px;
	height:20px;
	background-color:red;
}

.advantages_icon-brush{
	display:block;
	float:left;
	width:31px;
	height:31px;
	background-color:green;
}

.advantages_icon-heart{
	display:block;
	float:left;
	width:31px;
	height:27px;
	background-color:blue;
}

.advantages_name{
	text-transform: uppercase;;
	color:#000;
	font-weight:bold;
}

Но в моем варианте мне нужно увеличивать высоту каждой иконки чтобы сдвинуть текст, чтобы он встал нормально. Подскажите правильно ли это и если нет, то как сделать иначе?

P.S. Флексы не предлагать))) я пока что хочу флоаты постигнуть

Comments

[Ragtime Kitty]

Флоаты давно пора выкинуть и забыть, а использовать тут нужно именно флекс

[Алексей]

float:left;

Answer 1

[ParaBellum577]

Какие флоаты? На дворе 2к19 год.
тут 2 минуты на флексах это все сделать. Как говорится: когда за тебя придумали велосипед, не нужно пытаться его изобрести, пользуйся уже готовыми решениями.
Вот тебе на вскидку, глядя на картинку набросал разметку +-

<div className='wrapper'>
          <div  className='line'>
            <img src="" alt=""/>
            <div>
              <h1></h1>
              <p></p>
            </div>
          </div>
          <div className='line'>
            <img src="" alt=""/>
            <div>
              <h1></h1>
              <p></p>
            </div>
          </div>
          <div className='line'>
            <img src="" alt=""/>
            <div>
              <h1></h1>
              <p></p>
            </div>
          </div>
        </div>

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    > .line {
        display: flex;
        > div {
            display: flex;
            flex-direction: column; 
        }
    }
}

Comments

[Александр Осадчий]

Я думаю с scss человек еще не имел дело)

[ParaBellum577]

ну тут не так тяжело перенести это на css.
Я просто у себя в проекте быстро наклацал и скинул)

Answer 2

[Юпитер Макс]

advantages__item делаете padding-left; на нужную ширину и position:relative;

span с иконками делайте position:absolute; и выравнивайте как вам нужно

Answer 3

[Александр Осадчий]

Возможно это вам поможет - display: grid

А свойство float лучше не использовать как по мне)

Answer 4

[cssfish]

флоаты, флэксы, grid, код без фидла, мде...
может, тогда уж сразу на канвасе нарисуем?

и никто не заметил что там вообще-то нумерованный список?
Его и верстаем обычными блоками
а про иконки Юпитер Макс выше вам дело говорит )

Comments

[ParaBellum577]

А в чем проблема на флексе сделать настолько простую задачу? Причем тут канвас)

[cssfish]

покажите мне место, где я написал, что "проблема на флексе сделать"

[Александр Осадчий]

cssfish, а нумерацию прикрутить можно к чему-угодно с помощью css "counter-increment"

[cssfish]

Александр Осадчий, а семантику тоже можно прикрутить к чему угодно?