Как прижать к правому краю многострочного текста другой блок?

Question

true_evzheniy @true_evzheniy

HTML
CSS

Как прижать к правому краю многострочного текста другой блок?

Как прижать к правому краю многострочного текста другой блок? Именно к самой правой букве. Текст может меняться. Есть подозрение, что решения нет. jsbin.com/padazudaxa/edit?html,css,output

Вопрос задан более трёх лет назад
727 просмотров

1 комментарий

Подписаться 2 Оценить 1 комментарий

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 2

2 комментария

7 комментариев

true_evzheniy @true_evzheniy Автор вопроса

Текст слева. Блок справа текста, вплотную к самой правой букве текста

Написано более трёх лет назад
true_evzheniy @true_evzheniy Автор вопроса

зачем ты даешь совет прижать текст вправо?

Написано более трёх лет назад

Artem Kirillov @arttxmk

true_evzheniy, Аааа!!!
Ну смотри на следующий код

<div style='text-align: center;display:block;'>
<div style='display: inline-block;border:1px solid #000000;width:100px;'>
 Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Loremv Lorem Lorem Lorem Lorem Lorem Lorem
</div>
<div style='display: inline-block;border:1px solid #F9F9F9;width:100px;'>
Block div
</div>
</div>

Скопируй и вставь себе на страничку и смотря на этот код, напиши, или измени свой так, как тебе надо.

Написано более трёх лет назад

Johny Smith @Olek1

Артём Кириллов, сделайте Форк/Клон его кода на сайте jsbin.com, ничего ведь непонятно

Написано более трёх лет назад

Artem Kirillov @arttxmk

Olek1,
Окей...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div style='text-align: center;display:block;'>
<div style='display: inline-block;'>
 Lorem Lorem Lorem Lorem Lorem Lorem</div><div style='display: inline;width:100px;'>Block div
</div>
</div>
</body>
</html>

В коде после последнего "Lorem" сразу же, прямо после последней буквой находиться следующий блок
Или можно по другому...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div style='text-align: center;display:block;'>
<div style='display: inline-block;max-width:90px;'>
 Lorem Lorem Lorem Lorem Lorem Lorem</div><div style='display: inline;position:absolute;margin-left:-3px;'>Block div
</div>
</div>
</body>
</html>

Написано более трёх лет назад

Johny Smith @Olek1

Артём Кириллов, а я так тоже сидел игрался делал, но у вас все слова lorem одинаковой длины, по этому будет красиво, но ведь у него не предполагаются все одинаковые слова

Написано более трёх лет назад

Artem Kirillov @arttxmk

Olek1, Так можно изменить по своему!
Вот многострочный, с разными словами:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div style='text-align: center;display:block;'>
<div style='display: inline-block;max-width:80%;'>
Как прижать к правому краю многострочного текста другой блок? Именно к самой правой букве. Текст может меняться. Есть подозрение, что решения нет.</div><div style='display: inline;position:absolute;margin-left:-7px;'>Block div
</div>
</div>
</body>
</html>

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 1 подписчик
- вчера
- 169 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 80 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 210 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 723 просмотра
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 679 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 335 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 680 просмотров
3

ответа
HTML

Простой
Как сделать деплой проекта, статического сайта сделанного на чистом html у которого нет баз данных?
- 1 подписчик
- 26 мар.
- 254 просмотра
3

ответа
HTML

+1 ещё

Простой
Как менять тему письма при рассылке на почту в зависимости от темы устройства?
- 2 подписчика
- 25 мар.
- 258 просмотров
1

ответ
CSS

Простой
Как запретить выделение блока?
- 1 подписчик
- 19 мар.
- 199 просмотров
2

ответа
Показать ещё Загружается…

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Специалист тех поддержки (английский язык, смены с 16:00 до 00:00 Мск)

ТехСофт

от 50 000 ₽

Специалист по парсингу сайтов

Qwintry

от 1 000 до 3 000 $

Убери флекс у контейнера, и дай дочерним блокам инлайн-блок. Может можно и на флексе прижать, но я в флексах не особо силен.

Answer 1 · 2017-09-22 11:33:22

Oblfakir @Oblfakir

text-align: right; ?

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2017-09-22 11:43:12

text-align: right;
Задаёшь этот стиль тому тексту, который должен быть справа.
Или в самом тэге прописать атрибут, например

<p style='text-align: right;' align='right'> Lorem</p>

А если всё-равно не работает, то надо писать весь код, чтобы понять в чём ошибка.

Как прижать к правому краю многострочного текста другой блок?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт