Выровнять текст разного размера в диапазоне с плавающей запятой и смежном диапазоне, установленном в «display: block»? - PullRequest
0 голосов
/ 11 февраля 2020

У меня есть два пролета, каждый с разным содержанием и разными размерами - они соответствуют метке и связанному содержанию. Эта разметка генерируется (следовательно, встроенные стили), и я не имею никакого контроля над типами элементов, которые я могу использовать. Я не могу, например, поменять местами для div, но в противном случае я могу изменить стили и необходимые.

example spans

codepen пример

Чтобы диапазон «label» полностью заполнил вертикальное пространство, я переместил его влево и установил блок содержимого «display: block».

Можно ли выровнять высоту строки надписи и содержимого? Я пытаюсь получить что-то вроде следующего:

enter image description here

Я не css гуру, но я пробовал вариации на inline- block, flex, et c. в качестве альтернативы плаванию безрезультатно. Я не могу использовать абсолютное позиционирование, так как размеры содержимого и меток являются переменными.

<div class="se-NonEditableField se-NonEditableField_largeContent" 
     style="line-height: 77px; font-size: 64px; font-family: Arial; min-height: 77px;  background-color: rgb(255, 255, 128); color: rgb(0, 0, 0);">

  <span class="se-FieldLabel se-FieldLabel_readonly se-FieldLabel_readonly_largeContent" 
        style="font-size: 10px; font-family: Arial; min-height: 10px; font-weight: bold; color: rgb(0, 0, 0);">
    label</span>

  <span style="line-height: 77px; font-size: 64px; font-family: Arial; min-height: 77px; background-color: rgb(255, 255, 128); color: rgb(0, 0, 0); display: block;">
    content</span>
</div>
.se {
    background-color: #f0f0f0;
    color: black;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: default;
    box-sizing: border-box;
    line-height: normal;
}

.se-FieldLabel {
    vertical-align: top;
    padding-top: 3px;
    margin-left: 0px;
    margin-right: 3px;
    margin-top: 2px;
    box-sizing: border-box;
}

.se-FieldLabel_readonly {
    background-color: #f0f0f0;
    color: black;
    margin-top: 4px;
    padding-bottom: 3px;
}

.se-FieldLabel_readonly_largeContent {
    float: left;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 2px;
}

.se-NonEditableField {
    background-color: #f0f0f0;
    color: black;
    margin-left: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-left: 1ch;
    padding-top: 3px;
    text-indent: -1ch;
}

.se-NonEditableField_largeContent {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 2px;
    text-indent: 0;
}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...