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

StackOverflow https://stackoverflow.com/questions/1402292

  •  05-07-2019
  •  | 
  •  

Вопрос

Таким образом, веб-страница отображает большой объем текста в формате абзаца. Цель состоит в том, чтобы поместить элемент, такой как рисунок или фрагмент текста, рядом с пунктом 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] выше.

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

Это было полезно?

Решение

Да, ваш пробег может варьироваться в зависимости от разных браузеров и от того, насколько хорошо они справляются с плавающей запятой, но это довольно хорошо работает с 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top