Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому?
Для решения задачи существует несколько способов, из которых мы рассмотрим два. Первый, в каком-то смысле традиционный, основан на таблицах, а второй использует слои и стили.
Использование таблиц
Пример 1. Выравнивание текста с помощью таблицы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Два разных текста на одной строке Текст слева
В данном примере добавлено выравнивание по верхнему краю ячеек, на тот случай, что текст может занимать несколько строк.
Использование стилей
Чтобы расположить два разных текста на одной строке применяется стилевое свойство float со значением left . Исходно float предназначался для создания обтекания вокруг элемента, но в последствии стал активно использоваться при верстке слоев, в частности при создании колонок. С той же целью воспользуемся им и мы. Для этого создаём два класса leftstr и rightstr , для которых установим ширину 50% и обтекание по левому краю ( float: left ). Выравнивание текста по правому краю для правого слоя задаётся стилевым свойством text-align со значением right (пример 2).
Пример 2. Положение текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Два разных текста на одной строке
В данном примере стилевые классы leftstr и rightstr добавляются к абзацу текста. Свойство float действует не только на текущий элемент, но и близлежащие к нему элементы. Поэтому после создания нужных строк следует отменить действие float с помощью свойства clear .
Как сделать текст в одну строку?
Делаю адаптив сайта, и при уменьшении экрана появилась следующая проблема: вот как у меня https://yapx.ru/v/QEfaZ и как должно быть https://yapx.ru/v/QEfZw . Подскажите, какое свойство отвечает за то, что бы текст не переносился?
- Вопрос задан более года назад
- 2930 просмотров
3 комментария
Простой 3 комментария
Ankhena @Ankhena Куратор тега CSS
Но жду следующего вопроса.
Работа с текстом. Абзацы и переносы строк в HTML.
Настало время познакомиться с первыми тэгами HTML, которые мы будем использовать на веб-странице.
Давайте начнем знакомство с тэгами HTML с тэгов, которые предназначены для работы с текстом.
Все основное содержимое, которое должно выводиться в браузере, должно располагаться внутри элемента . Все команды и тэги будем писать именно там. Давайте вставим туда какой-либо произвольный текст, которые не содержит пока никаких тэгов.
Обратите внимание, что внутри текстового редактора для вставленного текста есть абзацы, переносы строк и.т.д. Т.е. текст отформатирован.
Если же открыть этот текст внутри браузера, все отступы и абзацы пропадают. Браузер воспринимает всю текстовую информацию как одну строку.
Каким образом можно разбить этот текст на абзацы?
Для того, чтобы разбить текст на абзацы, существует специальный HTML — элемент, который пишется следующим образом:
Содержимое абзаца.
Элемент p является парным тэгом и внутри него указывается содержимое того абзаца, которое должно в нем находиться.
Давайте с помощью этого элемента оформим сейчас наш текст. Каждый абзац разместим в этот тэг.
После этого текст будет разбит на абзацы и все будет отображаться намного лучше.
Возникает еще одна проблема. Как быть если нам нужно текст, который находится внутри одного абзаца, сделать в какой-то определенной его точки принудительный перенос строки.
Часто это может понадобиться при форматировании определенным образом текста на странице.
Для того, чтобы выполнить этот самый перенос строки в HTML есть специальный тэг, который называется:
Этот тэг нужно вставить в то место, где нужно выполнить принудительный перенос строки.
Элементы p и br — это одни из самых часто встречаемых элементов на веб-странице. С ними часто приходится работать при создании веб-страниц и работе с HTML.
Попробуйте сейчас поработать и поэкспериментировать с ними.
Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2022-03-24
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Расположение текста в одну линию
Вот картина нужно сделать три текста, как на картине, вот html
Ut Enim Ad Minima
Voluptatem Doleque
Lorem Ipsum Dolor
#left_text < color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; margin: 152px; >#middle_text < color: #728461; font-family: Verdana; font-size: 18px; font-weight: normal; margin: 40px; >#right_text
Не выходит. Вот даже когда в HTML пишу
asdasdasdasd
asdasdasdasdad
asdasdasdasdadasd
Тексты не в одной линии, и с div — так же. Как поступить? Спасибо.
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков