Одинаковые отступы элементов в таблице
Здравствуйте! Не знаю как правильно сформулировать вопрос, так что воспользуюсь картинкой и текстовым пояснением. Вот пример необходимой реализации проблемы. Линии добавлены для наглядности.
Имеется ячейка таблицы, которая содержит контент как на картинке. value, value-two и value-value имеют одинаковый размер шрифта, например 12px; hey - самый большой, жирный шрифт, например 20px, а World и Hello - жирный шрифт 16px соответственно. И вот что именно непонятно в написании html и css:
- Не могу понять, как сделать без добавления очередной таблицы на два столбца так, чтобы значения слева и справа начинались с определенного значения, допустим от максимально широкого левого значения на какой-либо из строк был отступ в 20px и значения справа все начинались с одного и того же места (вертикальная линия на картинке).
- Независимо от размера шрифта текст на каждой строке должен быть прижат к низу строки (горизонтальная линия). Пытался сделать через разделение левой и правой части на 2 столбца в таблице, но не получается сделать так, чтобы каждая строка начиналаось с одного и того же значения.
Надеюсь, мои ужасные объяснения кто-нибудь понял и сможет помочь мне с возникшей проблемой уровня детского сада. Спасибо за внимание!
Для выравнивания по нижней части можно использовать для элементов td свойство vertical-align: bottom;. Для одинакового размера ячейки можно использовать минимальную ширину (можно в процентах относительно родителя) min-width: значение;.
Можете предоставить HTML-вёрстку для точного пояснения?
Пример на JSFiddle
table {
width: 100%;
}
table td {
vertical-align: bottom;
}
table td div {
overflow: hidden;
}
table td p {
display: flex;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid #000;
clear: both;
align-items: flex-end;
overflow: hidden;
}
table td span {
display: block;
float: left;
margin: 0 0 -2px 0;
padding: 5px 0 0;
letter-spacing: 1px;
}
table td .first-column {
min-width: 45%;
font-size: 12px;
line-height: 14px;
vertical-align: bottom;
}
table td .second-column {
min-width: 45%;
font-weight: bold;
border-left: 1px solid #000;
}
table td .second-column.big-font {
color: red;
font-size: 20px;
}
table td .second-column.medium-font {
margin: 0 0 -4px 0;
font-size: 16px;
}<table>
<td>
<div>
<p>
<span class="first-column">value:</span>
<span class="second-column big-font">Hey</span>
</p>
<p>
<span class="first-column">value-two:</span>
<span class="second-column medium-font">World</span>
</p>
<p>
<span class="first-column">value-value:</span>
<span class="second-column medium-font">Hello</span>
</p>
</div>
</td>
</table>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
- Почему SERVER_ADDR имеет не тот IP 47905 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30566 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23894 visits
- Как через css изменить цвет png изображения? 10396 visits
- Blob video url download 10003 visits
- Php curl запрос через прокси с авторизацией 9274 visits
- Работа с captcha vk api 8145 visits
![html contenteditable игнорирует некоторые буквы [требует правки]](https://hostciti.net/images/nophoto.png "html contenteditable игнорирует некоторые буквы [требует правки]")
© "hostciti.net" 23.3.2025 | 12:42