Как поставить несколько картинок рядом с текстом и по горизонтали?

Question

Мне нужно сделать примерно так , как это сделать?

Answer 1

Я бы сделал это на Flexbox и использовал семантику, для данного решения подойдёт Description List.

body {font-family: 'Arial', sans-serif;}

.contacts {
  display: block;
  width: 100%;
  background: url("https://i.imgur.com/1MCVzaJ.jpg") no-repeat center center/cover;
  padding: 2em 0.5em;
  box-sizing: border-box;
  font-weight: 700;
  color: #fff;
}

.contacts-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

.contacts-item {
  display: block;
  max-width: 100%;
}

.contacts-item dt {
  display: none;
}

.contacts-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.contacts-label-icon {
  fill: #cc6601;
}

.contacts-label-text {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}

.contacts-label-text a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

<div class="contacts">
  <div class="contacts-wrapper">
    <div class="contacts-item">
      <dl class="contacts-label">
        <dt>Адрес</dt>
        <svg class="contacts-label-icon" xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M2.59 7.41a7.41 7.41 0 0 1 14.82 0c0 4.44-4.45 10.37-5.93 11.85a1.85 1.85 0 0 1-3 0C7 17.78 2.59 11.85 2.59 7.41m4.41 0a3 3 0 0 0 5.92 0 3 3 0 1 0-5.92 0"/>
        </svg>
        <dd class="contacts-label-text">Москва, Лесная&nbsp;улица, 20&nbsp;стр.&nbsp;5</dd>
      </dl>
    </div>
    <div class="contacts-item">
      <dl class="contacts-label">
        <dt>Время работы</dt>
        <svg class="contacts-label-icon" xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M0 10A1 1 0 0020 10 1 1 0 000 10M9.5 10.25l0-7.5 1 0 0 7 3 3-.75.75z"/>
        </svg>
        <dd class="contacts-label-text">ВС-ЧТ&nbsp;12:00-00:00,<br/>ПТ-СБ&nbsp;12:00-05:00</dd>
      </dl>
    </div>
    <div class="contacts-item">
      <dl class="contacts-label">
        <dt>Номер</dt>
        <svg class="contacts-label-icon" xmlns="http://www.w3.org/2000/svg" width="32" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3.7.85c-1.37.89-1.64 3.67-1.12 6a20.4 20.4 0 0 0 2.71 6.37A21.22 21.22 0 0 0 10 18.24c1.87 1.4 4.52 2.29 5.89 1.4a7 7 0 0 0 1.78-1.9l-.74-1.14-2-3.13c-.15-.23-1.1 0-1.58.25a4.53 4.53 0 0 0-1.24 1.36c-.45.25-.82 0-1.6-.36a9.6 9.6 0 0 1-2.89-3.05A9.41 9.41 0 0 1 6 7.8c0-.86-.09-1.3.33-1.61a4.56 4.56 0 0 0 1.74-.58c.44-.33 1-1.11.87-1.34l-2-3.13L6.16 0A7.2 7.2 0 0 0 3.7.85Z"/>
        </svg>
        <dd class="contacts-label-text">
          <a href="tel:+79853301177">+7 (985) 330 11 77</a>
        </dd>
      </dl>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как поставить несколько картинок рядом с текстом и по горизонтали?

Ответы (1 шт):