Css 浮动div的问题-我怎么能把小部件放在帖子旁边,而不是下面?

Css 浮动div的问题-我怎么能把小部件放在帖子旁边,而不是下面?,css,wordpress,html,css-float,Css,Wordpress,Html,Css Float,我正在努力找出如何将小部件与本页主栏右侧对齐: 似乎前3个小部件将内容区域强制为全宽,因此右侧的小部件将位于左栏下方 用CSS实现这一点有什么建议吗?我不希望为了将顶级小部件移动到它们自己的div中而弄乱functions.php文件的模板 谢谢 您必须将两个右侧div放置在post div之前 <div id="content" class="hfeed content"> <div id="primary" class="sidebar aside"> 而是这个

我正在努力找出如何将小部件与本页主栏右侧对齐:

似乎前3个小部件将内容区域强制为全宽,因此右侧的小部件将位于左栏下方

用CSS实现这一点有什么建议吗?我不希望为了将顶级小部件移动到它们自己的div中而弄乱functions.php文件的模板


谢谢

您必须将两个右侧div放置在post div之前

<div id="content" class="hfeed content">
<div id="primary" class="sidebar aside">

而是这个

<div id="primary" class="sidebar aside">
<div id="content" class="hfeed content">

尝试将您的
<div id="content" class="hfeed content">    
<div id="utility-before-content" class="sidebar utility">
<div id="primary"></div>
<div id="post-49" class="hentry post publish post-1 odd author-admin sticky category-news">
...

...

在这种情况下,CSS似乎是不够的

感谢@Frost和@Justin Lucas的建议。为了满足我的确切需求,我似乎需要将前3个小部件移出#content div并放在上面

现在HTML看起来像这样:

<div id="feature" class="widget widget_text widget-widget_text">
<div id="feature" class="widget widget_text widget-widget_text">
<div id="feature" class="widget widget_text widget-widget_text">
<div id="content" class="hfeed content">
<div id="primary" class="sidebar aside">

对于任何可能感兴趣的人,我通过在我的子主题(混合主题)中创建一个新的边栏元素来实现这一点,方法是在functions.php文件中添加以下内容:

register_sidebar( array(
    'name' => 'Features',
    'id' => 'id-of-widget-area',
    'before_widget' => '<div id="feature" class="widget %2$s widget-%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
) );
add_action( 'hybrid_before_container', 'my_widget_area', 20 ); 

function my_widget_area() {
    dynamic_sidebar( 'id-of-widget-area' );
}
register\u侧栏(数组(
“名称”=>“功能”,
'id'=>'widget区域的id',
'在小部件'=>''之前,
'在小部件'=>''之后,
“在标题“=>”之前,
“在标题之后”=>“
) );
添加_操作('hybrid_before_container','my_widget_area',20);
函数my_widget_area(){
动态_侧栏(“小部件区域id”);
}

我从:

+1-是的,这为我解决了问题。干得好,弗罗斯特!你能解释一下为什么它有效吗?我不明白为什么。我必须说我不知道确切的解释,但是放置
float:right
before
float:left
谢谢弗罗斯特。这将涉及更改Wordpress模板或functions.php文件-我想我必须这样做!您应该能够用一些
位置来修复它:绝对
,但我建议用swop代替。再次感谢弗罗斯特!是的,绝对定位会起作用,但是在没有前3个小部件的其他页面上会出现问题。所以我想我现在要尝试编辑functions.php文件了……谢谢Justin。这将涉及更改Wordpress模板或functions.php文件-我想我必须这样做!另外,对于你对工作的回应,“内容之前的实用程序”部分包含了3个最重要的小部件,需要位于“内容”部分之上。帖子也需要保留在“内容”部分。干杯。