3

Недавно задумался над такой стандартной казалось бы вещью, как расположение одного текста напротив другого сверху. Нужно решение по типу того, что в примере, но только, чтобы выравнивание было по верху. (align-items: flex-start не подходит, ибо не учитывает line-height и у большого текста получается нехилый такой отступ сверху)

P.S. В правом блоке может быть ещё контент, по типу описания чего-либо и кнопки.

P.P.S Приложил изображение того, что мне нужно.

введите сюда описание изображения

.row {
  width: 400px;
  height: 150px;
  background-color: #ccc;
  display: flex;
  align-items: baseline;
  padding: 5px;
}

.block-1 {
  font-size: 130px;
}

.block-2 .big-text {
  display: block;
  font-size: 26px;
}
<div class="row">
  <div class="block-1">
    1
  </div>
  <div class="block-2">
    <span class="big-text">
      Шагов к победе
    </span>
  </div>
</div>

3
  • Дял меня наиболее логический метод использывать flexbox. Подробней, css-tricks.com/snippets/css/a-guide-to-flexbox .
    – Nik Horse
    1 мар 2018 в 13:48
  • @NikPashchuk Чуть переделал пример. Мне нужно нечто вроде этого, но только чтобы выравнивание было относительно верха. align-items: flex-start не подходит 1 мар 2018 в 13:52
  • @АнтонАнтонов в общем нашел вот такую статью css-live.ru/css/metriki-shrifta-line-height-vertical-align.html , очень детально рассматривается этот вопрос, но насколько я понял простого способа нет, хотя решения в конце стать с примерами имеются
    – Get-Web
    1 мар 2018 в 22:13

1 ответ 1

1

Приветствую! Может быть как-то так?

.row {
  width: 300px;
  padding: 1px 5px 0 5px;
  display: flex;
  border-top: 1px solid red;
  border-left: 1px dashed blue;
  border-right: 1px dashed blue;
  font-family: arial;
}

.block-1 {
  display: flow-root;
  vertical-align: top;
  font-size: 130px;
  line-height: 0.75;
  text-align: right;
}

.block-2 {
  display: flow-root;
  vertical-align: top;
}

.block-2 .big-text {
  display: block;
  padding-bottom:5px;
  font-size: 26px;
  line-height: 0.8;
  font-weight: 600;
  text-align: left;
}

.block-2 .small-text {
  display: block;
  padding-left:2px;
  font-size: 16px;
  text-align: left;
}
<div class="row">
  <div class="block-1">1
  </div>
  <div class="block-2">
    <span class="big-text">Шагов к победе</span>
    <span class="small-text">Шагов к победе Шагов к победе Шагов к победе<br>Шагов к победе</span>
  </div>
</div>

3
  • Вариант то неплохой, именно для выравнивания. Но тут есть важный момент: теряется возможность использовать преимущества flex-box, поэтому не совсем универсален. 2 мар 2018 в 8:25
  • Рабочие проекты на флексах, которые нужно править. 2 мар 2018 в 11:00
  • Спасибо, именно то, что я искал! 2 мар 2018 в 18:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.