Question

我正在努力弄清楚如何将小部件对齐到此页面主列的右侧：http://carolineelisa.com/wordpress/

似乎前三个小部件正在强制内容区域达到整个宽度，因此右侧小部件会落在左列的下方。

使用CSS实现此目的的任何提示？我宁愿不必弄乱functions.php文件的模板来将顶级小部件移动到他们自己的div中。

谢谢！

Answer 1

您必须将两个右侧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">

Answer 2

尝试放置你的内心

<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">
...

Answer 3

在这种情况下，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文件中添加以下内容，在我的子主题（Hybrid）中创建一个新的侧边栏元素来完成此操作：

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' );
}

我从http://themehybrid.com/support/topic/new-widget-area#post-17991

得到了这个

浮动div的问题 - 如何在帖子旁边放置小部件，而不是在下面？

3 个答案: