Question

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

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

Answer 1

您可以根据需要使用一小段JavaScript来移动菜单。请参阅我从您分发的JSFiddle。

基本上我修改了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中的第一个子项插入。

Answer 2

您需要将菜单的浮动设置为右，并将其放在post div的顶部。

例如，CSS应该是这样的：

#post {width: 500px;}
#menu {
    float: right;
    width: 250px;
    height: 100px;
    color: #6666FF;
    border: solid 1px #333;
}

和HTML：

<div id="post">
<div id="menu">lorep ipsum</div>
</div>

Answer 3

您可以像处理图像一样在文本中包装文本，例如：http://jsfiddle.net/Nbpen/

当菜单最后呈现时，获取博客文本以包围菜单DIV

3 个答案: