Выровнять несколько чисел в строке

Question

Я использую bootstrap, чтобы попытаться создать следующий макет:

Найдите ниже мой минимальный пример:

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div>
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div>
                  <span class="curr"> USD</span>
                </div>
                <div>
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="markettime">Market Open</span>
            <span class="markettime2">(May 07 13:19 UTC-4)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Как видите, текст выглядит очень похоже, но не выравнивается правильно.

Есть предложения, почему?

Answer 1

Все эти пустые <div> s создают новые элементы блока , которые создают новую строку и заполняют все доступное горизонтальное пространство.

Я очистил как HTML, так и Код CSS здесь, но с изменениями только HTML он уже будет работать должным образом:

body {
  /* Moved all these common props up here: */ 
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1
}

.price {
  font-size: 36px;
  font-weight: 700;
  color: #131722;
}

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.diff {
  font-size: 18px;
  color: #26a69a;
}

.marketTime__base {
  font-size: 11px;
  letter-spacing: .4px;
  margin-top: 8px;
}

.marketTime__state {
  color: #37bc9b;
}

.marketTime__datetime {
  color: #787b86;
}

<div class="row">
  <span class="price">304.2<span class="">0</span></span>
  <span class="curr"> USD</span>
  <span class="diff">+3.57</span>
  <span class="diff">(+1.19%)</span>
</div>

<div class="marketTime__base">
  <span class="marketTime__state">Market Open</span>
  <span class="marketTime__datetime">(May 07 13:19 UTC-4)</span>
</div>

В качестве альтернативы вы можете использовать display: inline или display: inline-block, чтобы стилизовать эти <div> по-разному, но я думаю, что код HTML можно упростить много.

Answer 2

Каждая часть хранится в div s, значение по умолчанию - display: block. Блок-элементы занимают весь свой ряд. Один из вариантов - установить для этих дисплеев inline:

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div style="display: inline;">
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div style="display: inline;">
                  <span class="curr"> USD</span>
                </div>
                <div style="display: inline;">
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="markettime">Market Open</span>
            <span class="markettime2">(May 07 13:19 UTC-4)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Я не рекомендую вам использовать встроенный стиль, как я использовал, я только что сделал быстрое редактирование, чтобы показать разницу, когда изменение типа display.