Правильность верстки

250

06 сентября 2017, 12:25

Здравствуйте! Столкнулся с проблемой. Подскажите, пожалуйста, как правильно будет это сверстать? Проблема именно в выравнивании данных, как их выровнять таким же образом? Т.е. чтобы независимо от левой части, правая часть всегда была выравнена по левому краю

Answer 1

.col1 { 
  display: inline-block; 
  width: 100px; 
} 
 
.card { 
  display: table; 
  margin: auto; 
  border: 3px double#ccc; 
  padding: 20px; 
} 
 
p:nth-child(2) { 
  font-weight: 900; 
  color: green; 
}

<div class="card"> 
  <p> 
    <span class="col1">Запрос:</span> 
    <span class="col2">2 300 000р</span> 
  </p> 
  <p> 
    <span class="col1">Выдача:</span> 
    <span class="col2">2 300 000р</span> 
  </p> 
  <p> 
    <span class="col1">Ставка:</span> 
    <span class="col2">13%</span> 
  </p> 
 
  <p> 
    <span class="col1">Срок:</span> 
    <span class="col2">36 месяцев</span> 
  </p> 
</div>

Answer 2

Без использования фиксированной ширины для надписей:

.card { 
  display: table; 
  margin: auto; 
  padding: 1em; 
  border: 3px double #ccc; 
} 
 
p { 
  display: table-row; 
} 
 
span { 
  display: table-cell; 
  padding: .25em .5em; 
} 
 
p:nth-child(2) { 
  font-weight: 900; 
  color: green; 
}

<div class="card"> 
  <p> 
    <span>Запрос:</span> 
    <span>2 300 000 р</span> 
  </p> 
  <p> 
    <span>Выдача:</span> 
    <span>2 300 000 р</span> 
  </p> 
  <p> 
    <span>Ставка:</span> 
    <span>13%</span> 
  </p> 
  <p> 
    <span>Срок:</span> 
    <span>36 месяцев</span> 
  </p> 
</div>