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隐藏移动设备中的第一个左侧边栏并显示在桌面上，反之亦然。

Wordpress模板对齐

1 个答案: