Как сверстать такой элемент?

Question

[imageneyshen]

Как верстать единицу из этого списка? Вопрос стоит только о картинке и тексте рядом. Вроде легко, но мне кто то сказал что флоаты это прошлый век. А как тут без него? Position: absolute?

Для ясности : Как сверстать чтоб картинка была слева, а текст справа как на примере.

Answer 1

[Kirill Udaltsov]

Такое очень просто сверстать используя Flexbox

Сделал вам пример:
https://codepen.io/anon/pen/aeWZjm

Рекомендую к ознакомлению:
Вёрстка на Flexbox в CSS. Полный справочник

Answer 2

[Максим]

Сначала ставим картинку (в моём случае это иконка font-awesome ) и рядом блок (в моём случае это div) и всё это обёрнуто блоком родителем(в моём случае это .item) который просто flex и вертикальное выравнивание и всё а после этого обычная стилизация и в итоге получаем: https://codepen.io/topicstarter/pen/VobzxV

Answer 3

[Dima Polos]

Фоновой картинкой, и паддингом слева.

Comments

[Антон Р.]

а если нужен клик по картинке? )

[Dima Polos]

Антон Р., весь блок с текстом в ссылку обернуть.

[Dima Polos]

Антон Р., тут явно видно, что картинка - иконка, и если клик по ней нужен, то она это часть всего текстового блока.