Question

我有这个HTML代码：

<style>
  .ad { margin: 15px; height: 30px; background-color: #7f7f7f; }
  .article { width: 300px; font-size: 24px; line-height: 30px; border: 1px solid; }
</style>
<div class="ad"></div>
<div class="article">
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
  asd asd asd asd asd asd asd asd
</div>

我想在文章中放置一个广告，但我希望始终位于第3行和第4行之间。这只能使用CSS吗？如果没有，有没有办法使用Javascript或PHP实现这一点？我在PHP中的字符串中有文章，但我不知道第3行在哪里。

请注意，该文章是HTML格式，可能包含HTML标记，因此我无法计算字符数。此外，.ad标记可以位于.article标记之前或之后。

提前感谢您的宝贵帮助！

Answer 1

在html中，您无法使用Enter key转到下一行，换行标记在html中为<br>。所以你的代码必须是这样的：

<div class="article">
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
  asd asd asd asd asd asd asd asd<br>
</div>

您可以使用jquery查找第3行并添加ad div：

$(".article br:nth-child(3)").after('<div class="ad"></div>');

使用CSS在第3行之后放置一个元素

1 个答案: