Разметка элементов рядом с определенными абзацами в тексте без использования таблиц - PullRequest
Новая
       9

Разметка элементов рядом с определенными абзацами в тексте без использования таблиц

0 голосов
/ 10 сентября 2009

Таким образом, веб-страница отображает большой объем текста в формате абзаца. Цель состоит в том, чтобы поместить элемент, такой как рисунок или фрагмент текста, рядом с пунктом 17 или 26, не изменяя абзац каким-либо образом (то есть абзацу не нужно оборачиваться вокруг него).

На данный момент лучший способ сделать это, как я вижу, - это обернуть текст в таблицу, столбец для текста (и один абзац в каждой строке) и пустое поле, которое можно заполнить помещенным элементом по идентификатору. (идентификатор является номером строки).

Это кажется довольно неуклюжим. С одной стороны, если добавленный элемент длиннее по вертикали, чем абзац, в исходном тексте будет создан пробел. С другой стороны, каждый абзац теперь выглядит как 

<tr><td><p> garble fizz thoutrious</p></td><td id = "#"***></td></tr>

Может кто-нибудь придумать подходящую альтернативу?

*** Тогда с помощью jQuery легко получить этот идентификатор и заполнить его всем, что я захочу.

РЕДАКТИРОВАТЬ после ответа Андре:

Итак, у меня есть серия абзацев. 

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p>
<p>Song Song Song</p>

Я хочу иметь возможность добавить текст, изображение или какой-либо элемент, скажем, в третий абзац, чтобы получить что-то вроде: 

<p>Thing thing thing</p>
<p>Thang Thang Thang</p>
<p>Sing Sing Sing</p><img>
<p>Song Song Song</p>

С макетом вроде: 

[p   ]
[p   ]
[p   ][img]
[p   ]

... где фиксированная ширина

Проблема, которую я вижу с решением Андре, состоит в том, что ... на самом деле, нет, пустой интервал будет соответствовать, с идентификатором, связанным с абзацем, к которому он привязан, чтобы его можно было заполнить по мере необходимости, и каждый абзац может Чисто.

И не должно быть пробелов между [p], когда [img] выше.

Я собираюсь проверить это, а затем наградить ответ, я думаю.

1 Ответ

1 голос
/ 10 сентября 2009

Ну, ваш пробег может отличаться в зависимости от разных браузеров и от того, насколько хорошо они справляются с плавающей и чистой, но это работало довольно хорошо с IE 7, Google Chrome и FireFox 3.5: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>CSS Float/Clear example</title>
  <style type="text/css">
    p.firstParagraph
    {
      width: 50%;
      float: left;
    }

    p.secondParagraph
    {
      width: 50%;
      float: left;
    }
  </style>
 </head>
 <body>
  <p class="firstParagraph">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in ante non massa vehicula sodales. Praesent blandit venenatis purus non mollis. Nunc consectetur urna quis eros sollicitudin rhoncus. Nulla in nulla nibh. Ut in eros erat. Donec pharetra ultricies lacus, quis tincidunt orci iaculis at. Suspendisse varius posuere diam sed feugiat. Sed eu ipsum massa, vel ultricies augue. Duis sem augue, faucibus sit amet suscipit id, ultrices nec augue. Sed vel diam quis risus venenatis congue vitae eget urna. Sed sapien nisi, hendrerit a euismod quis, iaculis eu enim. 
  </p>

  <p class="secondParagraph">
    Something else
  </p>
 </body>
</html>
...