更加突出DIV或<p>浮动DIV之后</p>

Question

考虑这个HTML：

<div id="entry-content">
    <div id="my-300px-ad">AD CODE HERE</div>
    <p><img src="file.jpg" alt="file" /></p>
    <p>SOME TEXT</p>
    <p>SOME MORE TEXT</p>
</div>

现在，请考虑div#my-300px-ad向右浮动。我是否有可能在广告之前显示下一段中的图片，以便以下段落中的文字可以环绕广告？

例如，像这样：

为什么这样......？

问题是，由于各种原因（包括谷歌），我想避免在帖子的内容中放置广告。

仅限CSS

我确信使用一些JavaScript代码可以实现这样的功能。但我只是在寻找基于CSS的解决方案。 （跨浏览器兼容性，≥IE8）

请注意，只能更改div#my-300px-ad的CSS。除了它们是文章之外，不应该触及任何其他内容，因为这不是静态HTML页面。

PS： 很难为此构建单行问题。如果可以更清楚，请随时编辑问题标题。

Answer 1

这是不可能的，正如这两个问题所述：

Use CSS to reorder DIVs

CSS layout, use CSS to reorder DIVs

在不知道要跳过的元素的高度，使用javascript或更改html的情况下，您无法按照描述的方式对css重新排序元素。

但是，由于看起来你正在制作一个WordPress主题，所以将广告放在帖子内和图像之后应该不会太难。如果您这样做，将广告放在aside元素中会让Google知道它不属于主要帖子。

  

<强> Mozilla Developer Network   在HTML4中，每个部分都是文档大纲的一部分。但是文件   通常不那么线性。文档可以包含特殊部分   包含不属于的信息，尽管它与之相关，   主要流程，如广告块或说明框。   HTML5引入了<aside>元素，允许这些部分不存在   主要部分的一部分。