2015-09-15 28 views
0

我想在wordpress中的twentyten主题中使用seconday边栏。我已经将代码添加到了functions.php和sidebar.php中,并且出现了侧边栏。现在的问题是侧边栏在彼此之下,我希望他们彼此相邻,我怎么能做到这一点?Wordpress twentyten Seconday Sidebar

实施例图像:

enter image description here

的functions.php

function add_my_sidebars(){ 
register_sidebar(array(
'name' => 'My sidebar', 
'id' => 'my-sidebar', 
'description' => 'Just a little description', 
'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 
'after_widget' => '</div>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
} add_action('widgets_init', 'add_my_sidebars'); 

的sidebar.php

<?php if (is_active_sidebar('sidebar-1')) : ?> 
<div id="secondary" class="widget-area" role="complementary"> 
<?php dynamic_sidebar('sidebar-1'); ?> 
<?php dynamic_sidebar('my-sidebar'); ?> 

</div><!-- #secondary --> 

<?php endif; ?> 

CSS侧边栏从styles.css的

/* Sidebar */ 
.widget-area .widget { 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto; 
    margin-bottom: 48px; 
    margin-bottom: 3.428571429rem; 
    word-wrap: break-word; 
} 
.widget-area .widget h3 { 
    margin-bottom: 24px; 
    margin-bottom: 1.714285714rem; 
} 
.widget-area .widget p, 
.widget-area .widget li, 
.widget-area .widget .textwidget { 
    font-size: 13px; 
    font-size: 0.928571429rem; 
    line-height: 1.846153846; 
} 
.widget-area .widget p { 
    margin-bottom: 24px; 
    margin-bottom: 1.714285714rem; 
} 
.widget-area .textwidget ul { 
    list-style: disc outside; 
    margin: 0 0 24px; 
    margin: 0 0 1.714285714rem; 
} 
.widget-area .textwidget li { 
    margin-left: 36px; 
    margin-left: 2.571428571rem; 
} 
.widget-area .widget a { 
    color: #757575; 
} 
.widget-area .widget a:hover { 
    color: #21759b; 
} 
.widget-area .widget a:visited { 
    color: #9f9f9f; 
} 
.widget-area #s { 
    width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */ 
} 

回答

0

请尽量实现下面的代码。

我在主类中添加了一些CSS,所以请添加此CSS并检查布局是否与您想要的相同。

#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { 
    margin: 0 auto; 
    width: 965px !important; 
} 

#container { 
    float: left; 
    margin: 0; 
    width: 60%; 
} 

#primary, #secondary { 
    float: left; 
    width: 190px; 
}