文本中特定段落旁边的布局元素，不使用表格

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

  •  05-07-2019
  •  | 
  •  

题

因此，网页会以段落格式显示大量文本。目标是在第17或26段旁边放置一个元素，如图片或文本，而不以任何方式更改段落（即段落不应该包围它）。

到目前为止，我能看到的最好的方法是将文本包装在表格中，文本列（以及每行上的一个段落），以及可以通过ID填充放置元素的空白（ID是行号）。

这看起来相当笨重。首先，如果添加的元素垂直地比段落长，则将在原始文本中创建间隙。另一方面，每个段落现在看起来像

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

有人能想出合适的选择吗？

***然后使用jQuery，很容易抓住那个td id并用我想要的任何东西填充它。

在安德烈的回答后编辑：

所以我有一系列段落。

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

...宽度固定的地方

我在安德烈的解决方案中看到的问题是......实际上，不，空的跨度适合，有一个与其绑定的段落相关联的ID，以便可以根据需要填充，每个段落都可以明确。

当[img]更高时，[p]之间不应有任何差距。

我要测试一下，然后给出我认为的答案。

有帮助吗？

解决方案

嗯，你的里程可能因浏览器的不同而有所不同，以及它们处理浮动和清晰的程度，但这对IE 7，谷歌浏览器和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