html - 使用 CSS 在第三行之后放置一个元素

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 转到下一行，换行标记为<br>在 html 中。所以你的代码必须是这样的:

<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分区:

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