1

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

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

4

3 回答 3

2

您可以根据需要使用一小段 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. ​</p>

于 2012-08-27T18:22:02.640 回答
0

您需要将菜单的浮动设置为右侧并将其放在帖子 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>
于 2012-08-27T18:24:46.717 回答
0

您可以像处理图像一样将文本环绕在 div 周围，例如：http: //jsfiddle.net/Nbpen/

于 2012-08-27T18:26:13.670 回答