0

因此，网页以段落格式显示大量文本。目标是在第 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   ]

...宽度是固定的

我在 Andre 的解决方案中看到的问题是……实际上，不，一个空的 span 会很合适，有一个与它绑定的段落相关联的 ID，以便可以根据需要填充它，并且每个段落都可以清除。

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

我将对其进行测试，然后奖励我认为的答案。

4

2 回答 2

1

好吧，您的里程可能会因不同的浏览器以及它们处理浮动和清除的能力而异，但这在 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-09T23:17:33.170 回答
0

只是为了好玩：只有一个 with class 旁边的段落pright有 class pleft，它们后面跟着一个divwith class clb。图像将在段落内pright。

p{width:50%}
p.pleft{float:left}
p.pright{float:right}
.clb{clear:both}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p class="pleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p class="pright">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="clb"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p class="pleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p class="pright">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="clb"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>

于 2021-06-28T21:55:11.800 回答