Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Расположение текста на одной линии с другим сверху

Недавно задумался над такой стандартной казалось бы вещью, как расположение одного текста напротив другого сверху. Нужно решение по типу того, что в примере, но только, чтобы выравнивание было по верху. (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; }

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; }

1
Шагов к победе Шагов к победе Шагов к победе Шагов к победе
Шагов к победе

Комментариев нет:

Отправить комментарий