我正在使用 WordPress,我正在尝试修改我的模板,以便在我的博客页面上使用。我在页面右侧有一个菜单,而博客内容在左侧。我遇到的问题是菜单 <div>
下的所有空间浪费了,我想让博客内容围绕菜单环绕/流动<div>
.通常我会 float 菜单 <div>
在右侧,但是 WordPress 引擎输出此 <div>
在博客内容之后,所以我不确定如何将其 float 到页面的右上角。
我创建了一个 JSFiddle例子来说明。
最佳答案
您可以根据需要使用一小段 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
中。
关于css - 当菜单最后呈现时让博客文本环绕菜单 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12147091/