html - CSS:代码中内容后的 float 元素

Question

出于 SEO 的原因，我需要在应该在我的代码中围绕它流动的内容/文本之后有一个 float 元素。通常 float 是这样完成的:

CSS:

#menu {
float: right;
width: 180px;
padding: 10px;
background: #fcc;
margin: 0 0 15px 15px;
}

HTML:

<div id="menu">This is a right float. The long text flows around it.</div>

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

但我需要这样的 HTML:

<div id="content"><p>This is a long text. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Praesent nec risus.
Praesent adipiscing aliquet magna. Proin bibendum velit
vitae tortor. Vestibulum a dui quis urna feugiat viverra. 
Vestinbulum diam dui, ullamcorper in, rhoncus at, facilisis at, 
lorem. Phasellus turpis metus, sodales sit amet, laoreet nec, 
aliquet sit amet, tortor. Vivamus massa orci, gravida sit amet, 
dictum quis, euismod a, est. Aenean pretium facilisis nunc.</p>
<p>Nulla eros mauris, egestas eget, ullamcorper sed, aliquam ut, 
nulla. Phasellus facilisis eros vel quam. Etiam rutrum turpis 
a nibh. Integer ipsum. Vestibulum lacus diam, varius in, 
blandit non, viverra sit amet, sapien. Sed porta sollicitudin 
nibh. Nam eget metus nec arcu ultricies dapibus.</p></div>

<p id="menu">This is a right float. Because it's placed below the text in code,
it also appears that way.</p>

基本上，我需要这个 HTML 看起来像前面的示例(HTML 和 CSS)。我该怎么做？

float 元素的宽度是恒定的，但高度可以改变。内容必须围绕它流动。我需要这样的原因是因为 float 元素是菜单，它不包含任何重要的文本并且对于许多页面来说通常是相同的，所以内容应该在代码中最上面。

Answer 1

这个最近的问题可能是一样的

Wrap text around right floated column where left column appears first in html

解决方案涉及向右浮动一个空的“间隔符”div，这个间隔符在源代码中是第一个，它应该有内容的宽度和高度在右侧 - 在链接中解决方案包括一些 jQuery 以获得高度 - 实际菜单在 float 垫片顶部的位置

从该链接生成的 JS fiddle 示例:HERE