1

考虑这个 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是向右浮动。我是否可以让下一段中的图片出现在广告之前，以便后续段落中的 TEXT 可以环绕广告？

例如，像这样：

例子

为什么这样...？

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

仅 CSS

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

请注意，只有 CSSdiv#my-300px-ad可以更改。除了它们是文章之外，其他任何东西都不应触及，因为这不是静态 HTML 页面。

PS：很难为此提出一个单行问题。如果可以更清楚，请随时编辑问题的标题。

4

1 回答 1

1

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

使用 CSS 重新排序 DIV

CSS 布局，使用 CSS 重新排序 DIV

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

但是，看起来您正在制作一个 WordPress 主题，将广告放在帖子内部和图片之后应该不会太难。如果你这样做了，将广告放在一个side元素内应该会提示谷歌它不是主要帖子的一部分。

Mozilla 开发者网络： 在 HTML4 中，每个部分都是文档大纲的一部分。但是文档通常不是那么线性的。一个文档可以有特殊的部分，其中包含不属于主要流程的信息，尽管它与主要流程相关，例如广告块或解释框。HTML5 引入了<aside>允许这些部分不成为主要大纲的一部分的元素。

于 2012-06-09T04:17:25.357 回答