Элементы макета рядом с конкретными параграфами в тексте, без использования таблиц

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

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

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

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

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

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

EDIT после ответа Андре:

Так что есть ряд пунктов.

<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 ]

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

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

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

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

источник

2009-09-09 Anonymous

Макет должен быть сделан с помощью CSS , – SingleShot

@SingleShot Возможно, я неправильно использовал термин макет. Возможно, это вопрос дизайна. Как я должен разработать html, структурно, чтобы выполнить то, что я хочу, с помощью css-макета? И учитывая, что отображение этих элементов является динамическим, как я должен структурировать html, чтобы позволить javascript взаимодействовать точно на уровне абзаца? Блеск вашего комментария заставил меня прояснить мое мышление, но я хотел бы увидеть еще несколько полезных идей. –

Ну, ваш пробег может варьироваться в зависимости от различных браузеров и насколько хорошо они справляются с плавающей точкой и ясно, но это работает довольно хорошо с 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>

источник

2009-09-09 23:17:33

Хм. Это может сработать, хотя это не совсем то, что я имел в виду. Я уточняю вопрос, чтобы сделать его более ясным. –

Учитывая вашу настройку: иногда стол - это правильный путь. Подход, который я привел здесь, работает, пока это не произойдет ... и тогда это станет мучительным испытанием для настройки и тестирования, пока вы не подумаете, что это похоже на то, что вы планировали во всех браузерах, на которые вы нацеливаете. Иногда простота лучше. –

Элементы макета рядом с конкретными параграфами в тексте, без использования таблиц

ответ

Смежные вопросы