css - 当菜单最后呈现时让博客文本环绕菜单 DIV

Question

我正在使用 WordPress，我正在尝试修改我的模板，以便在我的博客页面上使用。我在页面右侧有一个菜单，而博客内容在左侧。我遇到的问题是菜单 <div> 下的所有空间浪费了，我想让博客内容围绕菜单环绕/流动<div> .通常我会 float 菜单 <div>在右侧，但是 WordPress 引擎输出此 <div>在博客内容之后，所以我不确定如何将其 float 到页面的右上角。

我创建了一个 JSFiddle例子来说明。

Answer 1

您可以根据需要使用一小段 JavaScript 来移动菜单。查看JSFiddle我从你那里 fork 出来的。

基本上我修改了 HTML 以将 id 添加到菜单和博客内容，如下所示:

<div id="blog">
    <p>...</p>
</div>
<div id="menu">
    ...
</div>

然后我在 CSS 中像这样设置它们的样式。请注意，菜单有明确的宽度，但博客内容本身没有。

#blog { }
#menu {
    float: right;
    width: 400px;
}

然后我快速使用了一点 JQuery 将菜单移动到博客中，这样它就可以向右浮动，并且文本会环绕在它周围:

$('#blog').prepend($('#menu').remove());​

本质上，JavaScript 所做的是从 dom 中删除菜单，然后将其作为第一个子项插入到 #blog 中。