html - Wordpress 模板对齐

Question

我正在尝试对齐左侧内容和右侧小部件区域以在水平线上堆叠。这是我的代码:-

    get_header(); 

?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
                    <div class="page-box"><!--page wraper box-->    
            <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>
                    </div><!--page wraper box-->     
        </main><!-- #main -->
    </div><!-- #primary -->

<?php
get_sidebar('left');
get_sidebar('right');
get_footer();

和 CSS:-

    /* Right side widgets. */
.right-widgets{
 float:right;  
 margin-right:-300px; 
}


/* Left side widgets. */
.left-widgets{

   float:left; 
   margin-left:-300px;
}

    .site-content{
    position:relative;
    width: 1000px;
    width: 62.5rem;
    margin: 2em auto 0em; 

}
.content-area {
    width: 100%;
    float:none;
    display:inline-block;
    position:relative;   
    clear:none;
}

.site-content .widget-area {
   position:relative;
   overflow: hidden;
   width: 300px;
   padding:1em;
   display:inline-block;
   clear:none;
}

发生的事情是，它按原样将小部件区域定位在左侧和右侧，但在内容区域下方，而不是在一条直线上。

当我在内容区域工作正常之前加载左侧边栏时，但在移动屏幕上左侧边栏在内容之前加载，我希望两个侧边栏都出现在内容之后。有什么想法我在这里做错了吗？

Answer 1

如果你找不到任何其他解决方案，你可以尝试这种方式。您可以两次调用左侧边栏，一次是在内容之前，一次是在 div 内容之后。给出不同的类名。使用 css 在移动设备中隐藏第一个左侧边栏并在桌面设备中显示，反之亦然。