Главная » Карточка (визитка) с кратким описанием и изображением на флексбокс

Карточка (визитка) с кратким описанием и изображением на флексбокс


14.08.2021, 10:10
Вариант 1


Картинка-аватар с левой стороны, текстовое содержимое справа

HTML

Код

  <div class="media">
  <img class="media-object" src="img/ava.png" alt="Sample photo">
  <div class="media-body">
  <h3 class="media-heading">Иван Сидоров</h3>
  <small>Аналитик данных</small>
  <p>Взаимодействие с разработчиками БД по вопросам качества данных. </p>
  </div>
  </div>

CSS

Код

.media {
  display: flex;
  align-items: flex-start;
  background: #FFFFFF;
  color: #333333;
  padding: 1em;
  border-radius: 3px;
  max-width: 24em;
  font-size: 1em;
  margin: 40px 30px;
  }
  .media img {
  max-width: 4em;
  }
  .media-object {
  margin-right: 1em;
  }
  .media-body {
  flex: 1;
  }
  .media-heading {
  margin: 0 0 .5em;
  font-size: 1.2em;
  }

Вариант 2


Картинка-аватар с правой стороны, текстовое содержимое слева

Чтобы поменять местами картинку и текстовое содержимое, всего лишь нужно изменить свойства для класса .media-object

Код

  .media-object {
  margin-left: 1em;
  order: 1;
  }

Вариант 3 - вложенная структура


Блок картинки с аватаром целиком вставляется в конец блока с классом .media-body другой карточки

HTML

Код

  <div class="media">
  <img class="media-object" src="img/ava.png" alt="Sample photo">
  <div class="media-body">
  <h3 class="media-heading">Иван Сидоров</h3>
  <small>Главный аналитик</small>
  <p>Взаимодействие с разработчиками БД по вопросам качества данных. </p>

  <div class="media">
  <img class="media-object" src="img/ava2.png" alt="Sample photo">
  <div class="media-body">
  <h3 class="media-heading">Пётр Иванов</h3>
  <small>Младший аналитик данных</small>
  <p>Взаимодействие с разработчиками БД по вопросам качества данных. </p>
  </div>
  </div>
  </div>
  </div>

Вариант 4 - спецсимволы HTML вместо изображения


Для класса .media-object устанавливаем размер подходящего шрифта и уменьшаем отступ справа

HTML

Код

  <div class="media">
  <div class="media-object">☎</div>
  <div class="media-body">
  <h3 class="media-heading">Иван Сидоров</h3>
  <small>Аналитик данных</small>
  <p>Телефон: 8(495)123-45-67 </p>
  </div>
  </div>

CSS

Код

.media-object {
  margin-right: .4em;
  font-size: 3em;
}

КОММЕНТАРИИ (0)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

ТЕГИ МАТЕРИАЛА

СТАТИСТИКА

  • Просмотры: 101
  • Комментарии: 0
  • Рейтинг: 0.0
  • Голосов: 0