Ребят добрый день/ночь/вечер.
Кто-нибудь знает, как расположить эти три объекта как на макете?
Я пытался сделать это при помощи таблицы || float || inline-block, но у меня всё время выходит что-то типа такого.
Я пытался сделать это при помощи таблицы || float || inline-block, но у меня всё время выходит что-то типа такого.
ну тут либо на бутстраповских гридах, либо на флексах попробуйте
про таблицы вообще забудьте, в прошлом тысячелетии так делали =)
1 лайк
Посмотрите на скриншот. Выделенное является едиными сущностями, не нужно иконки выносит отдельной “строкой”:
http://joxi.ru/LmGRdP6CwNDkor
Как подсказывает Hierumo, лучше всего использовать flexbox. Карточкам можно задать ширину (размеры посмотрите с помощью направляющей сетки) и спозиционировать внутри родителя с помощью justify-content.
1 лайк
Заранее извиняюсь, но если выделенные в красных прямоугольниках объекты являются едиными сущностями, как мне потом заставить кнопки “работать”, если они будут лишь на картинках? Или вы что-то другое имели ввиду? 
Спасибо большое. Вы вообще отдыхаете? Под любым вопросом я ваш ответ вижу. 
та я за компом сижу прост 24/7 практически, на телефон уведомляшки приходят, если вопрос простой - сразу отвечаю 
1 лайк
Заранее извиняюсь, но если выделенные в красных прямоугольниках объекты являются едиными сущностями, как мне потом заставить кнопки “работать”, если они будут лишь на картинках? Или вы что-то другое имели ввиду?
прост макет немного кривоват =)
я бы просто взял спрайт из этих картинок и каждой фиче приделал через background-position этот спрайт
а сами фичи на флексах
1 лайк
Выделенное красным - единая сущность. Иконка, текст, кнопка - все это вместе, условно говоря, есть “карточка”. Именно эти “карточки” нужно расположить по горизонтали, а не отдельно взятые иконки. И уже внутри самих карточек позиционировать их составляющие - иконки, текст, кнопки.
1 лайк
Я понял вас, спасибо!
Получилось через флексы сделать. Спасибо.
Ребят, ещё один вопрос. Не стал новую тему создавать.
Я пытаюсь сделать активным элемент при наведении на него мыши, с помощью :hover, пытаясь добиться того же результата, что и в макете. Но у меня ничего не получается. Что я делаю не так?
Используйте codepen, гадание на скриншотах не лучшая затея.
Если вам нужен ховер-эффект для аватарки, то и вешайте его непосредственно на аватарку. Что такое thief?
Аватарки через background-image - зло. Что мешает использовать <img>?
2 лайка
если очень упрощенно, то на:
https://jsfiddle.net/eqos6r7j/ (вместо местной няши подставляй любую другую рожицу =)
попробуй заодно повторить курсы про маски при наведении
Я до этого ещё не дошёл.
не стоит тогда начинать верстать. лучше пройти все курсы как минимум, чтобы велосипед не изобретать. там несложно на самом деле, все курсы за месяц проходятся при желании учиться
Я столкнулся с такой проблемой, что не могу вникнуть в текст, который написан в теории (то ли он так написан, то ли я такой тупой) и просто тупо повторяю действия по алгоритму. И я заметил, что, пока я верстаю этот шаблон, я уже успел не раз применить float и влюбиться во flex, хотя я в эти темы вник с большим трудом, а флексы прошёл только первую часть. Просто мне нужно применять полученные знания или я просто всё забываю/не понимаю. 
Вау, спасибо. Так намного удобнее. 
У всех так, ничего страшного. Терпение и труд…, как говорится.
Попробуй в голос читать - я серьезно. Если постоянно отвлекаешься на какие-то несущественные вещи - используй Метод помидора, хорошая штука против прокрастинации.
Вау, я оказывается уже давно как помидор. Я разбиваю время так:
Занимаюсь 30 минут, потом 5 минут перерыв. Снова занимаюсь 30 минут, но уже перерыв 10 минут, потом снова 30/5 и т.д. И устраиваю себе в день два больших перерыва по 30 минут. Я поставил себе планку, меньше которой я не имею права заниматься, и это 240 минут (больше я просто не успеваю).