文章/答案/技术大牛

发布

社区首页 >问答首页 >布局文本中特定段落旁边的元素，不使用表格

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

Stack Overflow用户

提问于 2009-09-09 21:45:22

回答 2查看 167关注 0票数 0

因此，网页以段落格式显示大量文本。这样做的目的是在不以任何方式改变段落的情况下，在第17或26段旁边放置一个元素，比如一张图片或一小段文字(即段落不应该环绕在它周围)。

到目前为止，我能看到的最好的方法是将文本包装在一个表中，一个用于文本的列(每行一个段落)和一个可以用ID填充的空元素( ID是行号)。

这看起来相当笨拙。首先，如果添加的元素在垂直方向上比段落长，则会在原始文本中产生间隙。另一方面，每个段落现在看起来像

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

有没有人能想到一个合适的替代品？

*然后使用jQuery很容易获取td id并用我想要的任何东西填充它。

在Andre的回答后编辑：

所以我有一系列的段落。

<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的解决方案的问题是...实际上，不，一个空的跨度就可以了，有一个与它绑定的段落相关联的ID，这样它就可以根据需要进行填充，并且每个段落都可以清除。

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

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

html

tabular

回答 2

Stack Overflow用户

回答已采纳

发布于 2009-09-09 23:17:33

嗯，你的里程数可能会因不同的浏览器而有所不同，以及它们处理浮动和透明的程度，但这在IE7，谷歌浏览器和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>

票数 1

Stack Overflow用户

发布于 2021-06-29 05:55:12

只是为了好玩:只有pright类后面的段落才有pleft类，后面跟着一个div，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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1402292

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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