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