LINUX.ORG.RU

как такое сделать css-ом ?


0

1

есть текст в тегах <pre></pre> внутри него могут быть слова обрамлённые <span class=«remark»> - вот их бы разместить справа на заданном отступе в той-же строки где встретились.

то есть текст

<pre>строка1
какой-то текст <span class=«remark»>заметка</span> ещё текст
строка2</pre>

должен отрендерится в

строка1
какой-то текст ещё текст            заметка
строка2

Чтото вроде

pre{position:relative;width:200px; }

pre .remark{position:absolute;right:-200px;}

Jaberwock ★★★ ()
Ответ на: комментарий от Jaberwock

спасибо, сработало..почти как надо

два следующие друг за другом <span class=«remark»> накладываются. Хотелось бы чтобы и вправо складывались как встречаются, но боюсь для css это уже фантастика :)

проще наверное на другом уровне вытащить их в отдельный блок

MKuznetsov ★★★★★ ()

М-м-м... а float-ы не за этим придуманы?

Miguel ★★★★★ ()
Ответ на: комментарий от Miguel

Приведите пример решения задачи поставленной автором. Будет интересно посмотреть

Jaberwock ★★★ ()

На заданном отступе от чего?

Если от правого края, то так:

.remark {
  float: right;
  margin-right: 13px;
}

Если слева от остальной строки, то так:

.remark {
  margin-left: 13px;
}

Apple-ch ★★ ()
Ответ на: комментарий от Jaberwock

Ну, я не настоящий сварщик, но Apple-ch уже сказал.

Miguel ★★★★★ ()
Ответ на: комментарий от Apple-ch

Не работает.

Уплывает в правый нижний угол pre и что естественно, в обратном порядке

Проверял в Fx 24.0

Jaberwock ★★★ ()
Последнее исправление: Jaberwock (всего исправлений: 3)
Ответ на: комментарий от MKuznetsov

два следующие друг за другом <span class=«remark»> накладываются. Хотелось бы чтобы и вправо складывались как встречаются, но боюсь для css это уже фантастика :)

А если магию в стиле .remark + .remark { магия_здесь;} ?

anonymous ()
Ответ на: комментарий от Jaberwock

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

Какое поведение должно быть в случае длинных строк?

Apple-ch ★★ ()

Раз воткнул <pre>, то и форматируй пробелами.

Kalashnikov ★★★ ()
Ответ на: комментарий от Apple-ch

Вангую

Не-а. Я проверил. Заметка оказывается на одну строчку ниже.

Miguel ★★★★★ ()
Ответ на: комментарий от Miguel

Заметка оказывается на одну строчку ниже

Такое только в фейлфоксе. В сафари, престоопере, ие 10 всё ок

Вот сниппет (бордеры добавил для наглядности).

Apple-ch ★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.