html — Расположение текста на одной линии с другим сверху
Задать вопрос
Вопрос задан
Изменён 4 года 9 месяцев назад
Просмотрен 132 раза
Недавно задумался над такой стандартной казалось бы вещью, как расположение одного текста напротив другого сверху. Нужно решение по типу того, что в примере, но только, чтобы выравнивание было по верху. (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>
<div>
1
</div>
<div>
<span>
Шагов к победе
</span>
</div>
</div>- html
- css
3
Приветствую! Может быть как-то так?
.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;
}
8;
font-weight: 600;
text-align: left;
}
.block-2 .small-text {
display: block;
padding-left:2px;
font-size: 16px;
text-align: left;
}<div>
<div>1
</div>
<div>
<span>Шагов к победе</span>
<span>Шагов к победе Шагов к победе Шагов к победе<br>Шагов к победе</span>
</div>
</div>3
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
HTML тег
❮ Назад Вперед ❯Тег <pre> используется для включения в HTML-документ предварительно отформатированного текста.
Во вложенном в тег тексте сохраняются все пробелы и разрывы строк (как известно, браузеры по умолчанию любое количество идущих подряд пробелов показывают как один). Тег <pre> используют для отображения программного кода, либо текста (например, стихотворения), где автор сам задал расположение строк относительно друг друга.
Содержимое тега отображается в браузере моноширинным шрифтом (шрифт, в котором все знаки имеют одинаковую ширину).
В тег <pre> можно вкладывать любые элементы за исключением тегов <big>, <img>, <object>, <small>, <sub> и <sup>.
Также не допускается использовать блочные элементы, так как они создают дополнительные отступы, изменяя расстояния между строчками.
Тег <pre> парный, содержимое пишется между открывающим (<pre>) и закрывающим (</pre>) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<pre>Крошка сын
к отцу пришёл,
и спросила кроха:
— Что такое
хорошо
и что такое
плохо? —</pre>
</body>
</html>Попробуйте сами!
Результат
Если вам необходимо вставить в HTML документ блок с кодом, используйте для этого тег <code>, вложенный в элемент<pre>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<pre>
<code>
body {
color:orange;
}
</code>
</pre>
</body>
</html>Попробуйте сами!
Результат
Тег <pre> поддерживает также глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <pre> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <pre>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <pre>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <pre>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <pre>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Текст: Макет — Учебное пособие по HTML
Текст HTML : МАКЕТ ТЕКСТА |
| | | |
| | |
Тег| | |
| |
Во-первых, заявим, что
«методы верстки с помощью HTML» — это оксюморон. Несколько тегов, таких как или определенные теги списка, позволяют добавлять отступы текста, в то время как Тегдает вам ограниченное форматирование управление с помощью «предварительно отформатированного» текста, и мы посмотрим вот эти простые механизмы. HTML-таблицы предлагают более точные управление позиционированием, которое рассматривается в Главе 13, «Таблицы». |
HTML был
специально разработан для передачи всех функций макета в конец
инструмент просмотра пользователя. Перечисленные элементы управления презентацией
вот результат любого расширения исходного HTML
стандарт или «творческое использование» (или неправильное использование, в зависимости от того, кто
спросите вы) существующего тега.
Предварительно отформатированный текст
всегда отображается моноширинным шрифтом, что позволяет столбцам
символы, чтобы выстроиться правильно.
Для этого
причине невозможно установить текст внутри абзаца как
предварительно отформатирован. Если вам нужно несколько пробелов в предложении,
использовать неразрывные пробелы
( ) вместо этого.
выровнять
атрибут с установленным значением
в центр. Атрибут выравнивания
можно добавить к тегу абзаца (
В этом разделе рассматриваются наиболее популярные
«читы» для отступа текста, используя только форматирование текста
теги.
Браузеры обычно добавляют примерно 40 пикселей пространства между
поле браузера (, а не граница окна) и
левый и правый края элемента цитаты, как показано на рис. 10-19.