将一个元素使用CSS

3号线后，我有这样的HTML代码：将一个元素使用CSS

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

我想在文章内的广告，但我想一直成为第三和第四线之间。这可能只使用CSS？如果没有，有什么办法可以使用Javascript或PHP来实现这一点？我在PHP中有一个字符串中的文章，但我不知道第三行在哪里。

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

在此先感谢您的宝贵帮助！

来源

2015-11-01 ilias_gr

你不得不打破自己的文章，以使广告放置正确。 – Sachin

文章从500多个RSS源自动导入，并且它们的布局不相同。您能否建议我采用自动方式在第三行之后放置广告？ –

我想，你可以尝试破解数据，然后..例如，设置'.article'后，获取设置在其中的文本（不是html）并获取设备宽度。然后尝试找出文本中第三行的结尾并添加一个“div”。然后，您可以将广告放入您添加的新“div”中。 – Sachin

在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>');

来源

2015-11-01 09:53:03

我知道这一点。但我的问题是不同的！该文章在一行中，并自动换行。 –

将一个元素使用CSS

回答

相关问题